css - 左对齐文本中的居中图像

Question

我想要内联(出现在同一行)但居中的图像在左对齐文本 block 中。

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

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

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

我可以只使用 CSS 来做到这一点吗(不会弄乱 HTML)？

我试过“文本对齐:居中；”和“ margin :0 自动；”无济于事。

提前致谢!

Answer 1

如果您可以编辑 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 注入(inject)父 div (.fish) 并使用 方法同上。

2. 给第一张图片一些左边距以插入图片 通过 nth-of-type* psuedo-class 朝向中心，如下所示。这不是一个精确的居中，而是一个解决方法。

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

*nth-of-type 可能不被所有浏览器支持。