All geek questions in one place

Vertical alignment inside div, vertical alignment: middle does not work

Vertical alignment: medium; does not work.

From css file : #header {height:150px; text-align: center; vertical-align: middle;} <div id="header"> <img alt="" id="logo" src="images/logo.png" /> </div>

I would wrap the logo inside another div if it helps align it to the center of the div wrapper.

+5
source share
6 answers

You can only do this indentation, because the other two paths line-height and vertical-align cannot work on img ....

Write

 #logo { padding: 20px 0; }

20px can be anything you need.

+5
source

do it

 #header {display:table;} #logo {display:table-cell; vertical-align:middle;}

Link

+18
source

I like to do this:

 <div style="relative"> <img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/> </div>
0
source

Another option, although it has its limitations:

 <!DOCTYPE html> <html> <head> </head> <body> <div style="height:150px; text-align: center;"> <img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" /> </div> </body> </html>

Negative margin should be half the height of the image. Thus, the following image will be concentrated in the above HTML:

enter image description here

This makes the centering dynamic if you have a div that changes height. This may be a little difficult with relative positioning, because the image is taken out of the normal layout stream.

0
source 
 #logo { position: absolute; top: 50%; margin-top: -75px; }

The general method of vertical alignment. With a top of 50%, and margin-top - negative half the size of the parent div.

0
source

I don't know why this worked in my case ... but I saw how it works by doing the following:

 div {padding-top: 0%;}
0
source

Source: https://habr.com/ru/post/1384447/

More articles:


All Articles