Question

在这个小提琴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”对齐，并防止它在图像下方包裹？

所以看起来像这样：

enter image description here

我尝试过文字对齐，但它似乎没有提供这种选项？

更新：

这是我现在使用的代码：

<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中时，这是输出：

enter image description here

在Chrome上，这是输出： enter image description here

Chrome输出正确，IE8上不支持使用css吗？

Answer 1

你必须稍微改变你的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;;
}

a jsFiddle example

Answer 2

在文本中添加选择器ID或类，并为其添加填充。

.aligntext{
    padding-left: 40px;
}

JSFiddle：http://jsfiddle.net/QLCeH/4/

另一种（可能更干净）的方法是将一个正确的部分（下面的Google标题和文字）分组并浮动它：http://jsfiddle.net/QLCeH/11/

Answer 3

只将此行添加到您的css中，它将解决您的问题：

 div#block > div { text-align:left; margin-left:45px; }

DEMO HERE:

如何在div中对齐文本？

3 个答案: