CODEWITHSUNDEEP
cssvertical-alignment
Joemon
Joemon

Reputation: 793

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 in another one text ?

PS: without line-height

Upvotes: 5

Views: 27979

Answers (9)

Mahesh Cheliya
Mahesh Cheliya

Reputation: 1364

<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.

Upvotes: 0

Mahendra Liya
Mahendra Liya

Reputation: 13218

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;

Upvotes: 3

algreat
algreat

Reputation: 9012

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>

Upvotes: 1

Brandon Hill
Brandon Hill

Reputation: 1910

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.)

Upvotes: 0

Jason Ellis
Jason Ellis

Reputation: 576

Try this:

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

Upvotes: 5

rafa ble
rafa ble

Reputation: 33

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.

Upvotes: 2

Adam C
Adam C

Reputation: 3911

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/

Upvotes: 0

marcgg
marcgg

Reputation: 66525

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

Upvotes: 11

Rimian
Rimian

Reputation: 38458

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.

Upvotes: 3

Related Questions