0

我想要内联（出现在同一行）但在左对齐文本块中居中的图像。

请看这里：http: //jsfiddle.net/2LHfA/4/

.extra {
display:table;
margin: 0 auto;
text-align: left;
}

.extra img {
display: inline;
?????
}

我可以只用 CSS 做到这一点（不弄乱 HTML）吗？

我试过“文本对齐：中心；” 和“保证金：0自动；” 无济于事。

提前致谢！

4

1 回答 1

2

如果您可以编辑 HTML：
我会将图像包装在另一个 div 中，并通过 text-align 属性将其内容居中对齐。

HTML：

<div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
     <div class="fish">
        <img src=http://i.imgur.com/innn2oL.gif />
        <img src=http://i.imgur.com/zRYKaCM.jpg />
    </div>
</div>

CSS：

 .fish{
    width:100%;
    text-align:center;
 }


如果您无法编辑 HTML：
您有两种选择：

  1. 考虑通过 Javascript 注入父 div (.fish) 并使用上述方法。

  2. 如下所示，通过 nth-of-type* psuedo-class 为第一张图像留出一些左边距以将图像推向中心。这不会是精确的居中，而是一种解决方法。

    .extra img:nth-of-type(1){
     margin-left:20%;
 }

*nth-of-type 可能并非所有浏览器都支持。

于 2013-09-11T17:13:49.630 回答