Question

我想内联（出现在同一条线上），但将图像置于左对齐文本块中。

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

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

我是否可以仅使用CSS（不会弄乱HTML）？

我试过“text-align：center;”和“保证金：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：
您有两种选择：

考虑通过Javascript注入父div（.fish）并使用上面的方法。
为第一张图像提供左边距以推送图像通过nth-of-type * psuedo-class向中心发送，如下所示。这不是一个确切的中心，而是一个解决方法。
```
.extra img:nth-of-type(1){
     margin-left:20%;
 }
```

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

左对齐文本中的居中图像

1 个答案: