Html 如何在div中对齐文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18446985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align text within div?
提问by blue-sky
In this fiddle http://jsfiddle.net/QLCeH/the text is not aligning with the header "Google" and the text is wrapping beneath the image.
在这个小提琴http://jsfiddle.net/QLCeH/ 中，文本未与标题“Google”对齐，并且文本环绕在图像下方。
here is fiddle code :
这是小提琴代码：
HTML :
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 :
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 ;
}
How can the text be aligned with the header "Google" and also prevent it from wrapping beneath the image ?
文本如何与标题“Google”对齐并防止其环绕在图像下方？
So that it appears like this :
所以它看起来像这样：
I've tried text align but it doesn't seem to provide this kind of option ?
我试过 text align 但它似乎没有提供这种选项？
Update :
更新 ：
This is the code I am now using :
这是我现在使用的代码：
<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>
When I paste this code into IE8 this is the output :
当我将此代码粘贴到 IE8 时，这是输出：
On Chrome this is the output :
在 Chrome 上，这是输出：
The Chrome output is correct, is the css used not supported on IE8 ?
Chrome 输出是正确的，IE8 不支持使用的 css 吗？
回答by Martijn
You have to shuffle your html a bit:
你必须稍微调整一下你的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>
and matching style (you dont need floats):
和匹配的风格（你不需要花车）：
#block img{
display:inline-block;
vertical-align: top;
width: 50px;
}
#text{
display:inline-block;
vertical-align: top;
width: 150px;;
}
回答by Charaf JRA
Add only this line to your css and it will solve your problem :
仅将此行添加到您的 css 中，它将解决您的问题：
div#block > div { text-align:left; margin-left:45px; }
回答by Praxis Ashelin
Add a selector id or class to your text, and add a padding to it.
将选择器 ID 或类添加到您的文本中，并为其添加填充。
.aligntext{
padding-left: 40px;
}
JSFiddle: http://jsfiddle.net/QLCeH/4/
JSFiddle：http: //jsfiddle.net/QLCeH/4/
Another (probably cleaner) way is grouping the right part (Google title and text below) in a div and floating it: http://jsfiddle.net/QLCeH/11/
另一种（可能更简洁）的方法是将正确的部分（下面的 Google 标题和文本）分组到一个 div 中并将其浮动：http: //jsfiddle.net/QLCeH/11/
