在html列中对齐图像

Question

我想要获得2列;带有图像的左列和带有属于图像的文本的右列。

我为每张图片使用img-circle类。我希望图像垂直对齐，但图像似乎以自己的方式显示。

获得包含大约10行的2列的最佳方法是什么，其中第一列包含图像，第二列包含属于图像的文本？

<div class="col-md-3">
  <img src="assets/images/openhaard_smart_px200_P3150849.jpg" class="img-circle pull-left" width="65" height="65">
</div>
<div class="col-md-9">
  <h2>Ontvangst bij de openhaard</h2>
  <p>Voel direct de warme gastvrijheid wanneer uw persoonlijke gastvrouw de dag door neemt.</p>
</div>
<div class="col-md-3">
  <img src="assets/images/gezichtsbehandeling400px_76174604.jpg" class="img-circle" width="65" height="65"></div>
<div class="col-md-9">
  <h2>Gezichtsbehandeling</h2>
  <p>Zeer uitgebreide 75 minuten durende gezichts- en decoleté behandeling in luxe ruime salons 
</div>

Answer 1

查看我为您创建的示例here。

我只为你创建了三行，但是你得到了这张照片。

希望这有帮助，很好的问题。

如果您对引导程序不熟悉，并查找其外观的直观表示，请查看shoelace。

Answer 2

代码中存在错误，导致取消对齐的原因 在第一个图像中的类

class="img-circle pull-left"

被使用 在第二张图片中

 class="img-circle"

这将导致第一张图片被拉向左边而另一张图片被居中。