图像和文本在div中对齐相同的行

Question

我试图将图像和文本对齐在一起。我试着在下面不工作。图像中的怒气如何。

<div >
     <img src="~/Content/Images/u130.png" alt="" />
 <div>
    <span style="display:inline; ">Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
 </div>

Answer 1

尝试内联img并将两个元素放在同一个div中。此外，span默认为内嵌，因此您不会包含style属性。

<div>
    <img src="~/Content/Images/u130.png" style="display: inline;">
    <span>
        Belong to a membership of more than 110,000 members in 141 
        countries and receive recognition for your contributions
    </span>
</div>

Answer 2

根据您尝试支持的浏览器，您将很难使其与多行文本对齐。 vertical-align属性在浏览器之间的处理方式非常不同，特别是旧浏览器。

我通常做的是通过将我的文本容器设置为position: relative;然后使用顶部和负边距将我的图像绝对定位在左侧和中间位置来进行黑客攻击。

要将此应用于您的代码，您应该只需将.feature:after规则复制到样式表中即可。使用图像更新图像路径，高度/宽度以匹配图像大小，顶部边距应更改为子弹图像高度的一半。之后，它将实际通过伪选择器为您创建图像DOM元素。

.feature {
  max-width: 300px;
  padding: 10px 30px;
  position: relative;
}
.feature:after {
  background: url(http://hotmexchili.com/media/infortis/blocks/product_view/bullet.png) center center no-repeat;
  content: "";
  display: block;
  height: 17px;
  left: 0px;
  margin-top: -8.5px;
  position: absolute;
  top: 50%;
  width: 17px;
}

<div class="feature">
  This is a single line feature
</div>
<div class="feature">
  This is a longer feature that should wrap to two lines but still have the icon centered on the left!
</div>

Answer 3

使用<div>和vertical-align: middle，如下所示：

＆＃13;

＆＃13;

img { 
    height: 30px;
}
div {
    display: inline-block;
    vertical-align: middle;
    max-width: 500px;
}

＆＃13;

<div>
    <img src="http://moneta.com.mx/web/wp-content/uploads/2014/02/check.png" alt="" />
</div>
<div>
    <span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

div {
    display: inline-block;
    vertical-align: top;
    max-width: 90%;
}

我更喜欢使用jQuery通过减去img的宽度来设置max-width。 将img置于顶部，使其与第一行对齐。

<div>
    <img src="~/Content/Images/u130.png" alt="" />
</div>
<div>
    <span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>