图像和文本对齐

Question

我有一个html页面，其中图像和文本彼此相邻，如下面的标记所示：

<div><img src="image1.png"/><p>First Image</p></div>
<div><img src="image1.png"/><p>First Image</p></div>

我希望图像和文本在每个DIV下并排排列，并且所有div都要在页面中列出。

请帮助我如何使用CSS实现此目的，而不使用表格。

Answer 1

我会使用display: inline-block

img {
    width: 100px;
    display: inline-block;
}
p {
     display: inline-block;
}

DEMO jsFiddle

Answer 2

如果我理解你的话，你的文字就不会与你的形象一致。好吧，如果是这种情况，那么这种情况不会发生的原因是因为段<p>元素是一个块元素，所以它将是其包含父元素的整个宽度。如果您不希望在<p>标记内嵌显示内嵌使用内嵌，请执行此操作

div p{ /* Change this according to your selectors. */
   display: inline;
}

Answer 3

div{
  overflow:hidden;
  display:inline;
 }
 div img{
   display:inline-block;
 }
 div p{
   display:inline-block;
 }