vertical align not working

is it possible to vertically align an image coming inside an anchor tag ?

I am using two anchor tags inside a DIV.. each one should vertically align to center. in one I am using an image i开发者_如何学编程n another one text ?

PS: without line-height

Vertical align does not behave as you'd think in divs since it works only for table cells.

There are numbers of CSS "hacks" to get that to work such as this one or this one

Try this:

div{
    display: table-cell;
    vertical-align: middle;
}

You can't vertical align inside a div tag but you can with a table cell. You could work around it if you can fix the height of your image and its container.

This seems to work for me:

/* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

The solution is very simple using CSS.

Here's an example:

#anySection {
    background: white url(../images/anyImage.jpg) no-repeat center;
    height: 500px;
    width: 500px
}

Markup:

<div id="anySection"></div>

You'll get a 500 x 500 px section with your image centered inside.

I had the same problem. This works for me:

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>

Consult the following url, it may hold the answers you need as well as give you a comprehensive understanding of the vertical align property.

http://css-tricks.com/what-is-vertical-align/

Since nobody's pointed it out, you get different behaviours depending on the DOCTYPE.

(In my case, the transitional doctype wasn't vertically aligning inline elements without sibling text nodes, whereas html5 does.)

<div style="border:1px solid #000;height:200px;position: relative;">
     <div style="position: absolute;top: 50%;left:50%;">
     hello mahesh // Div Body part
     </div>
</div>

Fiddle demo

Try this.