在CSS中将多个图像水平居中

我知道这个问题很受欢迎，但我找不到任何优雅的答案

我需要水平对齐2个图像并将其居中。我已经读过

内联块

，我对边距（边距0自动技巧）、填充和其他几何图形非常擅长。问题是。。。我的html代码是由javascript解析器（不是我的和复杂的）从标记中解析出来的，每个元素都包含在

标记中。但是我的

标签的

文本对齐

是正确的

我知道我的问题的答案是在图像周围的标记中使用

并将其文本对齐到中心，但我寻求更优雅的方法，因为我更喜欢使用html5语义的干净和现代编码，并展望未来

元素将不再存在的地方

基本上，我的问题很简单：在没有外部障碍的情况下做这样的事情有可能吗

UPD:jsfiddle- 如果我能根据子元素改变

的样式就太完美了，但据我所知，这是css不可能做到的

另外，我想我可以使用CSS

calc（）

方法来计算宽度并设置精确的边距，但我认为即使是

div

也比这更好

我不能在

元素上使用

text align:center

，因为它会使所有内容居中，而不仅仅是图像

UPD2： 我使用jquery

.parents

方法设置所有

包含

以标记为中心的：

$('img').parents('p').css('text-align', 'center');

---- 
p{
显示：块；
宽度：100%；
背景：谭；
文本对齐：居中
}
PIMG{
显示：内联块
}

---

这里的视图结果：

< P>这里有7种CSS方法，在DIV（或体）的中间水平和垂直地排列元素。然后您可以创建第二个div并获得解决方案

文本对齐：居中

保证金：自动

显示：表格单元格

位置：绝对位置

翻译功能

柔性箱

计算功能

img{
宽度：100%；
最大宽度：150px；//您的宽度
高度：自动；
位置：相对位置；
左：钙（25%）；
}

---

以下是一些您可能会发现有用的答案

首先

web开发中有一条一般规则，即在依赖CSS之前，您应该始终尝试使用基本浏览器的功能。这是我们称之为渐进式增强的一部分。遵循这条规则，解决问题的最佳方法是添加html5元素

。下面是一个使用JSFIDLE的示例：

p{
文本对齐：对齐；
}
figure{/*然后您可以将img置于figure元素的中心*/
文本对齐：居中；
}
img{/*您不需要边距0自动或显示块，让浏览器完成它的工作*/
宽度：6.25em；
高度：6.25em；
}

你能发布相关的html结构和css吗？一个jsiddle会很棒：）@webtikijs没有设置text-align:justify，它将包装在所有元素周围。justify是我设置的。@xec，类似这样的东西谢谢演示，完美：）您不能设置

text align:center在
上@xec
是由javascript标记解析器从md到html生成的，它环绕所有元素。这将使所有文本居中（我需要对齐）。我不能在
元素上使用
text align:center
，因为它将使所有内容居中，而不仅仅是图像。这不起作用，我不知道为什么您希望
左：calc（25%）将任何内容居中。单击RunCodeSnippet，然后单击全屏，您将看到图像没有居中。感谢您的回答，我将尝试
calc（）
函数作为初学者。@xec，显然
calc（）
函数会稍微复杂一些，包括窗口/文档宽度属性；对于我的例子，我需要考虑至少有{1,2,3}个图像的可能性。你的css如何知道一个图像后面有两个图像？这看起来像是灾难的秘诀；）@xec，是的：）好吧，我暂时用jquery解决方案，因为我使用这个库。嗨，如果你脑子里有MARKDOWN->HTML java/jquery解析器，它没有在任何地方添加
，请给我一个链接：）是的，我的解析器很脏，它不是我的。我知道，这很令人沮丧；）！这就是为什么我说我能理解你别无选择！好吧，我想让这一切变得优雅和有效的唯一方法就是用21点和妓女编写我自己的标记解析器。我想要1/2/3的图像，我不想弄乱html（基本上是因为我写的文章是降价的，这意味着我应该在每个图像周围写html标记）。这是CSS/html的唯一方法。我对markdown parser了解不够，无法帮助您，但我肯定认为您应该尝试开发一个不会添加
标记的markdown parser。顺便说一句，在投票否决某个答案之前，你应该阅读Stackoverflow的规则，下面是它所说的：当你遇到一篇非常草率、不费力气的帖子，或者一个明显而且可能危险地错误的答案时，使用你的否决票。这里的人正试图免费帮助您，别忘了。@jbutler483您使用的是哪种浏览器？检查此小提琴并调整浏览器的大小，它工作得非常好：
<p>
    <img src="http://leone.ge/mem/img/image2.png" />
    <img src="http://leone.ge/mem/img/image2.png" />
</p>

---- 
p{
    display:block;
    width:100%;
    background:tan;
    text-align:center
}
p img{
    display:inline-block
}