CSS: img's inline-block alignment
Question
For whatever reason this image is making the rest of the markup to not align within it's container, despite it is set to display inline-block.:
For you guys should be something simple. For me, I already spent days trying to solve this problem.
By the way, I do not want to use float. I do not fully know how to control their weirdness and do not have time atm to learn it. I'll appreciate if you could please not use them. HOWEVER, I can take a crash course on floats if you lead me to one that covers all their mishaps and such.
For now, I need to stick to a non-float css.
PS. The borders are just for "debugging" and are really not necesary
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
<img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
<a href="#" id="logo_txt">Title goes here</a>
<span id="social_media">Social media links</span>
</div>
</body>
</html>
CSS:
#header {
border: 1px solid red;
width: 800px;
height: 123px;
margin: 0px auto;
padding: 0px;
background-color: rgb(181, 230, 29);
}
#logo {
border: 1px solid red;
display: inline-block;
width: 172px;
height: 123px;
}
#logo_txt {
border: 1px solid black;
display: inline-block;
width: 100px;
height: 123px;
}
#social_media {
border: 1px solid black;
display: inline-block;
width: 300px;
height: 123px;
text-align: right;
}
4 answers
solution1
2 ACCPTED 2012-06-07 03:37:47
解决此问题的最快方法是在#logo样式中添加vertical-align: top 。
solution2
1 2012-06-07 03:41:52
Add
vertical-align:text-top;
to your image style, vertical-align:top; would work too but I used text top since its aligning against text
The default vertical alignment is baseline, which would align the bottom of the image with the text in the other divs.
solution3
1 2012-06-07 06:15:26
Hi i if you used display inline-block in any way than define one properties
vertical-align:top;
Because by default properties is vertical-align:middle; so than define verticle-align properties.
and now sam think in img tag Define your img tag properties in your css verticel-align:top .
solution4
0 2012-06-07 03:35:35
float the elements to the left and everything works: http://jsfiddle.net/ncQXD/1/
I added this CSS:
#header > * {
float: left;
}
#header {
overflow: auto;
}
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.