html - 图像和文本对齐

Question

我有一个 html 页面，其中 Image 和 Text 彼此相邻，如下面的标记所示：

<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;
}

演示jsFiddle

Answer 2

如果我对您的理解正确，那么您的文字不会与您的图像内联。好吧，如果是这种情况，那么这种情况还没有发生的原因是因为段落<p>元素是块元素，因此它将是其包含父元素的整个宽度。<p>如果您不想内联显示它，请像这样在您的标签上使用 display inline

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;
 }