如何在div中對齊文本？
[英]How to align text within div?
問題描述
在這個小提琴http://jsfiddle.net/QLCeH/中 ，文本沒有與標題“Google”對齊，文本正在圖像下面。
這里是小提琴代碼：
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嗎？
3 個解決方案
解決方案1
2 已采納 2013-08-26 15:00:08
你必須稍微改組你的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;;
}
解決方案2
0 2013-08-26 14:57:36
在文本中添加選擇器ID或類，並為其添加填充。
.aligntext{
padding-left: 40px;
}
JSFiddle： http ： //jsfiddle.net/QLCeH/4/
另一種（可能更干凈）的方法是將一個正確的部分（谷歌標題和文字在下面）分成一個div並浮動它： http ： //jsfiddle.net/QLCeH/11/
解決方案3
0 2013-08-26 15:26:40
如何對齊由分隔符分隔的 div 中的文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.