Question

我试图让我的图像水平对齐但我似乎做错了但我不知道问题是什么。

这是CSS：

.imgcontainer img {
display:inline-block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
margin:0px 37px 0px 0px;
width:175px;
height:175px;
}

Answer 1

这可能是你追求的吗？ http://jsfiddle.net/taneleero/ByDAA/7/

假设您希望“让我们卖它”与每个图像对齐，我在每个图像周围添加了容器+文本并将它们设置为内联块。对于容器，我指定了text-align：center，因此内联块将与中心对齐。我也改为图像显示：阻止图像下方的文字。

  .container {
      position: absolute;
      margin: auto;
      width: 100%;
      text-align:center;
  }
  .imgcontainer img {
      display:block;
      position:relative;
      padding:1px;
      border: 1px solid #c4c4c4;
      width:175px;
      height:175px;
  }
span {
    display:inline-block;
    margin:0px 37px 0px 0px;
}

Answer 2

您需要将每个图像和文本元素包装在特定元素（div或figure）中。

一个数字可能是最好的，因为它允许在其中使用figcaption元素作为文本。

每个数字设置为display:inline-block和vertical-align: top，容器设置为text-align:center

Codepen Example

Answer 3

您应该使用img将每个p和div换行并使用float:left。示例：fiddle

Answer 4

您看到了换行符，因为您明确地将它们放在<br>个元素中。

要达到预期效果，请将图片及其子文字放在单独的容器（div或article）中，并将display:inline-block样式应用于 元件。

Answer 5

尝试：

    float: left;

并更改您的css - 删除不需要的属性

水平DIV图像容器

5 个答案: