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

我想将由四个图像组成的行以及它们各自的标题置于其下方。目前我使用居中一行图像，其中每个图像都有自己的标题

<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;”部分。

有没有其他方法可以尝试？我故意避免为此使用表格，因为我不确定在像智能手机这样的小型显示器上观看时，它的缩放效果如何。

来源

2016-01-13 Sephi-

如何使一个类，并应用到div？使用这种方法，解析器不会将您的内联块声明移除。 –

您是否尝试过使用jquery添加显示方式？ –

@MarcosPérezGude我似乎已经说得很糟糕......我正在编辑的编辑创建了我在DIV块中写入的文章。我无法在那里创建一个新的风格类。 –

只需使用css类？

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

而在HTML

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

来源

2016-01-13 15:22:08 NicolaPasqui

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

回答

相关问题