Question

Hi I want to place a Image which is center align vertically and horizontally as well,
My HTML markup is

<ul class="big-wrapper">
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</div>
</li>
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">

</li>
</ul>

Used Css
ul.big-wrapper li > div {
height:612px;
width:612px;
}

ul.big-wrappe li {
float:left;
margin:0 20px 20px 0;
position:relative;
text-align:center;
}

After doing all those stuff i am not able to do so.Please have a look and help me.

Answer 1

There’s a few good ways to both horizontally and vertically center an element, it just comes down to the situation and your preference.

With the following markup:

<div><img src="a.png" width="100" height="100"></div>

line-height

div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }

Good quick fix without messing with positioning too much but if actually text is being centered this way could be problematic.

display:table-cell

div { width:300px; height:300px; text-align:center; display:table-cell; vertical-align:middle; }

Works just like good old tables and highly flexible, however only supported in modern browsers.

position:absolute

div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }

top and left offsets should be set to half the respective dimensions of the element being positioned. Works well if the containing element needs to be flexible but absolute values are required to work.

---

Demo of all techniques: jsfiddle.net/Marcel/JQbea (fullscreen)