Geek Answers Handbook

Vertical alignment does not work

Is it possible to vertically align an image inside an anchor mark?

I use two anchor tags inside a DIV .. each of them should be vertically aligned in the center. in one I use the image in another text?

PS: no line height

+4
source share
9 answers

Vertical alignment does not behave the way you think in a div, since it only works for table cells.

There are CSS hack numbers to get this to work, like this or this

+11
source

Try the following:

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

You cannot vertically align inside a div tag, but you can use a table cell. You can get around it if you can fix the height of the image and its container.

+3
source

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;
+3
source

The solution is very simple using CSS.

Here is an example:

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

Markup:

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

You will get a 500 x 500 pixel section with your image located inside.

+2
source

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>
+1
source

Refer to the following URL, it may contain the answers you need, and also give you a complete picture of the vertical alignment properties.

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

0
source

Since no one pointed to this, you get different behaviors depending on the DOCTYPE.

(In my case, the transitional doctype did not vertically align inline elements without text nodes, but html5 does.)

0
source 
 <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>

Demo screenshot

Try it.

0
source

More articles:


All Articles