在这个 fiddle 中 http://jsfiddle.net/QLCeH/文本未与标题“Google”对齐，并且文本环绕在图片下方。
这是 fiddle 代码:
HTML:
<div style="margin-left:auto;margin-right:auto; width: 600px;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
<a href="http://www.google.com">Google</a>
</div>
<div>
This is some multi line text to show that multiple lines to not align very well.
</div>
CSS:
*{
margin:0;
padding:0;
}
#block {
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 200px;
text-align: center;
line-height:30px;
padding:3px 0;
padding-right: 100px;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
如何使文本与标题“Google”对齐并防止它在图像下方换行？
所以它看起来像这样:
我试过文本对齐，但它似乎没有提供这种选项？
更新:
这是我现在使用的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#block img{
display:inline-block;
vertical-align: top;
width: 50px;
}
#text{
display:inline-block;
vertical-align: top;
width: 350px;}
</style>
</head>
<body>
<div style="float: left;display: inline;width=450px" id="block">
<img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;" id="text">
<a href="http://www.google.com">Google</a><br />
<p>This is some multi line text to show that multiple lines to not align very well.</p>
</div>
</div>
<div style="float: left;display: inline;width=450px" id="block">
<img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;" id="text">
<a href="http://www.google.com">Google</a><br />
<p>This is some multi line text to show that multiple lines to not align very well.</p>
</div>
<div>
</body>
</html>
当我将此代码粘贴到 IE8 中时，这是输出:
在 Chrome 上，这是输出:
Chrome 输出正确，IE8 不支持使用的 css 吗？
最佳答案
你必须稍微调整一下你的 html:
<div id="block">
<img height="50" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;" id="text">
<a href="http://www.google.com">Google</a><br />
<p>This is some multi line text to show that multiple lines to not align very well.</p>
</div>
<div>
和匹配样式(你不需要花车):
#block img{
display:inline-block;
vertical-align: top;
width: 50px;
}
#text{
display:inline-block;
vertical-align: top;
width: 150px;;
}
关于html - 如何对齐div中的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18446985/