Vertical align inside div, vertical-align: middle not working
Question
Vertical-align: middle; is not working.
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 to align it to the center of the wrapper div.
6 answers
solution1
18 2011-12-03 06:39:55
solution2
5 ACCPTED 2011-12-03 07:00:43
You can do this only by padding, because other two ways line-height and vertical-align can't work on img ....
Write
#logo
{
padding: 20px 0;
}
20px can be anything as you require.
solution3
0 2013-07-10 09:57:48
我不知道为什么在我的情况下起作用...但是通过以下操作，我可以看到它起作用：
div {padding-top: 0%;}
solution4
0 2011-12-03 07:04:15
i like doing this:
<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
solution5
0 2011-12-03 07:20:10
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>
The negative margin should be half of the image height. So the following image will center in the above HTML:
This makes the centering dynamic if you happen to have a div that changes height. It can get a little tricky with the relative positioning though, because the image is taken out of the normal layout flow.
solution6
0 2011-12-03 07:22:12
#logo {
position: absolute;
top: 50%;
margin-top: -75px;
}
Common method of doing vertical alignment. With top being 50% and margin-top being negative half the dimension of the parent div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.