获取多行文本，以div中的图像为中心

以下是我的html元素的外观（不正确）。我需要的文字中间垂直对齐：获取多行文本，以div中的图像为中心

enter image description here

的文本没有换行符，它只是环绕基于股利的大小。封闭的div是200px，图像是75px，图像的右边距是15px，文本是110px来显示。

.favorite { 
    float: left; 
    width: 200px; 
    font-size:14px; 
    height:75px; 
} 
.favImg { 
    margin-right:15px; 
    float:left; 
    width:75px; 
} 

.favText { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 150%; 

    width:110px; 
    float:right; 
} 

      <div class="favorite"> 
       <div class="favImg"><img src="http://localhost/images/icons/favorites-tennis.jpg" width="75" height="75" border="0" alt="Tennis"/></div> 
       <div class="favText">Playing a sport alot and more</div> 
      </div>

来源

2013-10-04 spock99

tooooooo很多没用的css。它可以做得简单得多：

.favorite { 
width: 200px; 
font-size:14px; 
height:75px; 
white-space:nowrap; 
} 

.favImg, .favText{ 
display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; 
vertical-align:middle; 
} 

.favImg { 
margin-right:15px; 
width:75px; 
height: 75px; 
background: #ff0000; 
} 

.favText { 
line-height: 150%; 
width:110px; 
white-space:normal; 
}

行显示：-moz-inline-stack;显示：inline-block;缩放：1; *显示：内联;只是一种启用跨浏览器内联块的方式：

“zoom：1; * display：inline;” - 是为旧的IE浏览器（如IE 7）显示：-moz-inline-stack - 用于旧的Mozilla Firefox。如果你不想使用它（尽管没有理由避免它），你可以使用display：inline来代替子节点。

在这种情况下，所有带有浮点和表格的解决方案都显得过于复杂和可疑。尝试编写简单的代码。

你并不需要每个元素包装在一个div或者：

<div class="favorite"> 
<img src="http://localhost/images/icons/favorites-tennis.jpg" class="favImg" alt="Tennis"/><p class="favText">Playing a sport alot and more</p> 
</div>

来源

2013-10-04 15:53:34

尝试使用display: table你父容器和display: table-cell为您的孩子的容器。

事情是这样的：

.favText { 
    display: table; 
    vertical-align: middle; 
    line-height: 150%; 
    height: 100%; 
    width:110px; 
    float:right; 
} 

.inner { 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2013-10-04 15:43:07

试试这个（Working JSFiddle Demo）：

.favorite { 
    float: left; 
    width: 200px; 
    font-size:14px; 
    height:75px; 
} 
.favImg { 
    margin-right:15px; 
    float:left; 
    width:75px; 
    height: 75px; 
    background: #ff0000; 
} 
.favText { 
    display: table; 
    vertical-align: middle; 
    line-height: 150%; 
    height: 100%; 
    width:110px; 
    float:right; 
} 

.inner { 
    display: table-cell; 
    vertical-align: middle; 
} 
<div class="favorite"> 
    <div class="favImg"><img src="http://localhost/images/icons/favorites-tennis.jpg" width="75" height="75" border="0" alt="Tennis"/></div> 
     <div class="favText"> 
      <div class="inner">Playing a sport alot and more</div> 
     </div> 
</div>

基本上，增加一个.inner div来包裹的.favText内的文本，使.favTextdisplay: table和height: 100%，然后给出.inner div display: table-cell和vertical-align: middle。

当涉及未知高度的事物垂直居中时，这是一种非常快速简单的方法，即使您不知道容器元素或内容元素的高度，也可以工作。

如果您的文本总是只有一行，您可以在您的原始代码中设置line-height: 75px您的.favText div，并将它留在那个位置（但如果文本换行不是选项）。

来源

2013-10-04 15:45:15 Ennui

只需添加一个margin-top: 13.75px;到favText。

JSFiddle。

来源

2013-10-04 15:56:08 PMint

获取多行文本，以div中的图像为中心

回答

相关问题