Databases
StackOverflow2013
Postsdbo
POHow do I keep an image in the center of the page regardless of browser window size?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I keep an image in the center of the page regardless of browser window size?
    primarykey
    data
    text
    <p>I want to do this using only CSS + HTML. It has to work in all major/latest browsers - not IE 6 just yet.</p> <p>The code I have is as follows:</p> <pre><code>&lt;div id="left_arrow"&gt; &lt;img src="images/left-arrow.png"&gt; &lt;/div&gt; #left_arrow { position: absolute; left: 0px; margin: 10px 0 15px 0; /* top, right, bottom, left */ padding: 5px 5px 7px 5px; /* top, right, bottom, left */ } </code></pre> <p>I tried doing the position as 'absolute', but if the browser size changes the arrow doesn't move and I want it to always be at the center of the browser regardless of the size.</p> <p>Edit:</p> <p>I want it to always be at the center of this div:</p> <pre><code>&lt;div id="images" width="100%"&gt; &lt;img src="image1.jpg" width="45%"&gt; &lt;img src="image2.jpg" width="45%"&gt; &lt;/div&gt; </code></pre> <p>This is the entire block of code that it is within:</p> <pre><code>&lt;div id="compare_view" align="center"&gt; &lt;div id="compv-navbar"&gt; &lt;a href="#"&gt;&lt;img src="icon1.png" id="icon1"&gt;&lt;/a&gt; | &lt;a href="#"&gt;&lt;img src="icon2.png" id="icon2"&gt;&lt;/a&gt; | &lt;a href="#"&gt;&lt;img src="icon3.png" id="icon3"&gt;&lt;/a&gt; | &lt;span id="view_name"&gt; text &lt;/span&gt; &lt;/div&gt; &lt;div id="left_arrow"&gt; &lt;img src="images/left-arrow.png"&gt; &lt;/div&gt; &lt;div id="right_arrow"&gt; &lt;img src="images/right-arrow.png"&gt; &lt;/div&gt; &lt;div id="images" width="100%"&gt; &lt;img src="image1.jpg" width="45%"&gt; &lt;img src="image2.jpg" width="45%"&gt; &lt;/div&gt; &lt;div id="notice"&gt; Notice will be here. &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Edit 2: If there is no CSS solution, a jQuery solution is also fine.</p> <p>Edit 3: Still no takers? <em>bump</em></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmarcamillion
    1. USmarcamillion
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I keep an image in the center of the page regardless of browser window size?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I keep an image in the center of the page regardless of browser window size?
      1. USlaurent
      1. VTFavorite
    3. VO
      singulars
      1. POHow do I keep an image in the center of the page regardless of browser window size?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPlease post the full code if you have more positioning around that image.
      singulars
      1. POHow do I keep an image in the center of the page regardless of browser window size?
      1. USmeder omuraliev
    2. COI just updated the CSS. The left: 0; is accurate. It's just the height that throws me off. So, center on the Y-axis (if that's what you meant when you said center of x & y). I would like 'left arrow' to be vertically center (i.e. along the y-axis) of the div with id=images.
      singulars
      1. POHow do I keep an image in the center of the page regardless of browser window size?
      1. USmarcamillion
    3. COcan you please include a full demo with jsfiddle.net? People would be more motivated if they can play around with something. I know I'm more likely to attempt this if you do that :)
      singulars
      1. POHow do I keep an image in the center of the page regardless of browser window size?
      1. USmeder omuraliev
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload