0

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

这是 JSFiddle：http: //jsfiddle.net/ByDAA/4/

这是CSS：

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

5 回答 5

1

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

假设您希望“让我们出售它”与每个图像对齐，我在每个图像周围添加了容器 + 文本并将它们设置为内联块。对于我分配 text-align:center 的容器，因此内联块将与中心对齐。此外，我更改为 images do display:block 以强制在图像下方显示文本。

  .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;
}
于 2013-10-06T19:48:03.503 回答
1

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

图形可能是最好的，因为它允许将其中的figcaption元素用于文本。

每个图形设置为display:inline-block和vertical-align: top容器设置为text-align:center

代码笔示例

于 2013-10-06T19:49:40.820 回答
1

你应该用 a和使用来包装每个imgand 。示例：小提琴pdivfloat:left

于 2013-10-06T19:50:33.410 回答
0

您看到换行符是因为您明确地将它们与<br>元素一起放在那里。

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

于 2013-10-06T19:32:10.267 回答
0

尝试 ：

    float: left;

并更改您的 css - 删除 unneded 属性

于 2013-10-06T19:33:42.413 回答