文字对齐不能处理图像？

Question

我刚写了下面的代码

<img src="http://www.lorempixel.com/100/100"><img src="http://www.lorempixel.com/100/150" id="test">

#test {
    text-align: center;
}

但是图像不是居中的.我也用过text-align: right哪个也没用.我可以使用float和margin-left但我很好奇为什么它不使用text-align.

Answer 1

看看w3.org网站上描述的text-align css属性.它说这个属性适用于块容器.

现在,<img>标记本身不是容器(它不能包含任何东西),因此text-align属性不能按预期工作.为了使图像居中对齐,有各种各样的方法; 最简单的是text-align: center在其父元素上指定.请参阅修改演示.

Answer 2

此属性指定当内联框的宽度总和小于线框宽度时,块的内联内容如何对齐.

尝试将img放入指定了内联块的div中,并将第一个图像作为div的背景图像.

就像是:

<div style="display: block; text-align: center; background-image:url([your_first_image]);">
    <img src="[your_second_image]"/>
</div>

但是,这可能不适用于图像,您需要使用float,padding或其他类似的东西.

Answer 3

text-align用于对齐元素内的文本。元素img内部没有居中的文本，因此它不执行任何操作。float，它将元素浮动在其父级中，这可能就是您想要的。