StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Not the best practice text-align to align images.</p> <blockquote> <p>"The tricky thing about the text-align property is that you can only align text with it - you can't use it to move block-level elements like images. Some browsers will align images or tables with this property, but it's not reliable, as you've found." --<a href="http://webdesign.about.com/od/graphics/f/blfaqtxtalgimg.htm" rel="nofollow">Jennifer Kyrnin, About.com</a></p> </blockquote> <ul> <li><p>You can use the deprecated img's attribute align="center", Although you won't use. This way tags and style are mixed, and, to worsen, there are vertical and horizontal spaces around the full image.</p> <pre><code><img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way </code></pre></li> <li><p>The best way to solve this is using css. Setting the image as div's background then the div's space will be your image's space and you can use margins to put it in place. You can try to use one of these others techniques <a href="http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/" rel="nofollow">CSS Tricks's Absolute center an image</a></p></li> </ul> <p>CSS background-image Technique:</p> <pre class="lang-css prettyprint-override"><code>background:url('path_to_img') center center no-repeat; /* div center */ background:url('path_to_img') center 0 no-repeat; /* div horizontal center */ background:url('path_to_img') 0 center no-repeat; /* div vertical center */ </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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