How to Align Vertically the image in a div?

Question

How to display the image as vertical align in div container?

The image "setting.png" placed in last column in the code i attached. please advice solution please.

.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}

.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}

.tableCol{
float: left;
height: 40px;
line-height: 40px;
}

<div class="table">
    <div class="tableRow">
        <div class="tableCol" style="width:10%; text-align:center;">1</div>
        <div class="tableCol" style="width:40%">Michael</div>
        <div class="tableCol" style="width:40%">webexp@gmail.com</div>
        <div class="tableCol" style="width:10%;">
        <a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle"  /></a>
        </div>
    </div>  
</div>  

Answer 1

Just add   (space before a link)

  <div class="table">
        <div class="tableRow">
            <div class="tableCol" style="width:10%; text-align:center;">1</div>
            <div class="tableCol" style="width:40%">Michael</div>
            <div class="tableCol" style="width:40%">webexp@gmail.com</div>
            <div class="tableCol" style="width:10%;">&nbsp;
            <a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle"  /></a>
            </div>
        </div>  
    </div> 

better solution:
add this to css:

img {
margin-top:10px;
}

Answer 2

Here, this should work: Add this to your div which contains the image that should be centered.

display:table-cell;
vertical-align:middle;

This should center the image vertically no matter the dimensions of your div or the image that it contains.

Answer 3

You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).

Add class tableColSettings to the <a> around the settings image. Then add CSS;

.tableColSettings{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px; /* Half image dimensions */
    width: 20px;
    height: 20px;
    line-height: 0;
}
.tableColSettings img{
    width: 100%;
}

The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/

Hope this helps!

Answer 4

CSS具有标签名称“ vertical-align”，也许您会得到解决方案