Question

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

我需要水平对齐2张图像并将它们居中。我已经阅读了inline-block并且我非常擅长边距（边缘0自动技巧），填充和其他几何。事情是...我的html代码是通过javascript解析器（不是我的和复杂的）从markdown解析的，并且每个元素都包含在<p>标记中。但我的text-align <p>标记是合理的。

我理解我的问题的答案是在图像周围的标记处使用<div>并将其文本对齐设置为居中，但我寻求更优雅的方式来执行此操作因为我更喜欢干净和现代的编码html5语义并展望未来<div>元素不再存在的未来。

基本上，我的问题很简单：是否有可能在没有外部阻挡的情况下做这样的事情？

UPD：jsfiddle - http://jsfiddle.net/8274L7wc/

如果我可以根据子元素<p>更改<img>的样式，那将是完美的，但据我所知 - css无法做到这一点。

另外我想我可以使用CSS calc()方法来计算宽度并设置精确的边距，但我认为即使div也会比这更好。

我无法在text-align:center元素上使用<p>因为它会使所有内容都集中在一起，而不仅仅是图像。

UPD2：

我通过使用jquery .parents方法设置包含<p>标记的所有<img>来快速临时解决方案：

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

Answer 1

以下是一些您可能会觉得有用的答案。

<强>第一

Web开发中有一条通用规则，即在依赖CSS之前，应始终尝试使用基本浏览器的功能。这是我们称之为渐进增强的一部分。遵循此规则，解决问题的最佳方法是添加 html5元素 <figure></figure>。 Here is the doc及以下是使用jsfiddle的示例：

p {
  text-align: justify;
}
figure { /* Then you can center your img inside the figure element */
  text-align: center;
}
img { /* You don't need margin 0 auto or display block, let the browser do its work */
  width: 6.25em;
  height: 6.25em;
}

<p>
  <figure> <!-- You can add several img in a figure element -->
    <img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="First workspace" title="" />
    <img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="Web-browser on the second workspace" title="" />
  </figure>
</p>

<强> SECOND

如果您不想在HTML标记中添加元素，那么CSS只能帮助您现在拥有多少图像以及它们的大小。在这种情况下，您可以使用calc()计算所需的尺寸，并在第一张图像上添加填充左侧。正如您所看到的，这非常复杂，难以维护，绝对不被视为最佳实践。这是一个例子：

p {
  text-align: justify;
}
img {
  width: 100px;
  height: 100px;
}
p img:first-child {
  margin-left: calc(50% - 100px)
}

<p>
  <img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="First workspace" title="" />
  <img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="Web-browser on the second workspace" title="" />
</p>

祝你好运！

Answer 2

<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
}

在此处查看结果：http://jsfiddle.net/kr76uu46/2/

Answer 3

这里有7种css方法将水平和垂直一个元素放在div（或body）的中间。你可以创建第二个div，然后就可以得到解决方案了。

文本对齐：中心
余量：自动
显示：表细胞
位置：绝对
翻译功能
Flexbox的
计算功能

＆＃13;

img{
width: 100%;
max-width: 150px; //your width
height: auto;
position: relative;
left: calc(25%);
}

＆＃13;

<img id="b" src="http://placehold.it/150x150" alt="Sample Image 6">
<img id="a" src="http://placehold.it/150x150" alt="Sample Image 6">

＆＃13;

否则，如果您仍然有兴趣寻找不同的方法（基于CSS的解决方案），请检查LINK

在CSS中水平居中多个图像

UPD：jsfiddle - http://jsfiddle.net/8274L7wc/

UPD2：

3 个答案: