对齐图像

Question

在列表中对齐图像的最佳方法是什么。我正在尝试类似的东西，我希望它们看到彼此垂直对齐，但是文字有点包含图像。

• 文本
• 图像
• 文本

Answer 1

要删除文字，请将所​​有文字放在浮动元素中，然后将clear: both放入图像中。有了这个，文本将不会包装图像。

Answer 2

我可能错了，但听起来你正在使用花车。没有必要。

CSS：

#mylist li{ display: block }

HTML：

<ul id="myLst">
  <li>text</li>
  <li><img src="my-image.png" alt="" /></li>
  <li>text</li>
</ul>

这将使每个列表项彼此对齐。

Answer 3

只使用浮动左，它的工作 代码会喜欢这个

HTML：     

    
•                在这打字     

<li>
   <img src="" />
    text here
</li>
</ul>

和CSS：

li img {float:left; vertical-align: top;}

• 抱歉打字错误，我还在学习如何在这里输入代码..
• 如果代码仍然不清楚请通知我，我会将我的完整代码上传到我的主人。
• 如果给予垂直对齐以使子弹编号转到图像的上方

Answer 4

或者，您可以将Foundation或Bootstrap与其网格一起使用。然后，您可以使用列对齐图像和文本。但快速简单的解决方案是使用：

img{display:block;}