在html / css中水平对齐图像时，最佳做法是什么？

Question

这就是我通常的做法，但它通常会导致问题。然后我将浮动图像，但随后下面的内容被搞砸了，因为它们没有浮动。建议？

 <p>This is content</p> <img src="" />
 <img src="" /> <p>This is more
 content</p>

Answer 1

您可以使用display: inline-block。

Answer 2

如果你使用float，给浮动元素“下面”的元素赋予CSS clear: both。

Answer 3

p { font-size:1.2em; line-height:1.5; margin-bottom:1.25em; vertical-align:middle; }
img { vertical-align:middle; margin:0 0.5em;} // margin is optional


<p>This is content <img src="/imgs/btn-notify.png" hspace="5" /> <img src="/imgs/btn-notify.png" hspace="5" /> This is more content</p>

内部段落标记是内嵌图像的正确语法，我建议在更改本机布局属性之前从那里开始。

任何inline element都可以在<p>标记内使用（利用）。