Question

我想将一行包含四个图像及其下方各自的标题。目前我正在使用

<div class="clear" style="text-align: center;">
  <div style="float: left; padding-right: 10px;">
    <img>...</img>
    <p>...</p>
  </div>
  <div style...
</div>

显然，这并没有让容器居中，因为它们正在浮动。我已经阅读了一个解决方案，这将非常有效：

style="display: inline-block;"

所以我去了那个风格并使我的代码看起来像这样：

<div style="text-align: center;">
  <div style="display: inline-block; vertical-align: top; padding-right: 10px">
    <img>...</img>
    <p>...</p>
  </div>
</div>

现在正如我所提到的，这非常有效，并且在预览中它完全符合我的要求，但是，问题就在这里开始。我试图将此作为网站上一篇简短新闻文章的一部分，该网站提供了一个相当广泛的编辑器，其功能可让您编写自己的HTML代码。由于某些我无法理解的原因，当您保存帖子时，似乎有一些脚本在代码上运行，这会删除“display：inline-block;”部分。

我可以试试吗？我故意试图避免使用桌子，因为我不确定它在智能手机等小型显示器上观看时的扩展程度如何。

Answer 1

只使用css类？

.container{
text-aling:center;
}
.container > div{
display:inline-block;
}

并在HTML中

<div class="container">
   <div>...</div>
   <div>...</div>
   ....
</div>

将一行图像居中，每个图像都有自己的标题

1 个答案: