Question

我刚写了以下代码

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

#test {
    text-align: center;
}

http://tinkerbin.com/jHwuqUhm

但是图像没有居中。我也使用了text-align: right，但也没用。我可以使用float和margin-left，但我很好奇为什么它不使用text-align。

Answer 1

看看text-align css property as described on w3.org website。它表示此属性适用于块容器。

现在，<img>标记本身不是容器（它不能包含任何内容），因此text-align属性不能按预期工作。为了使图像居中对齐，有各种各样的方法;其中最简单的是在其父元素上指定text-align: center。 See revise demo

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，它将元素浮动在其父元素中，可能就是你想要的。

Answer 4

不是最佳练习文本 - 对齐以对齐图像。

“text-align属性的一个棘手的问题是你只能将文本与它对齐 - 你不能用它来移动像图像这样的块级元素。有些浏览器会将图像或表格与这个属性对齐，但是正如你所发现的那样，它不可靠。“ - Jennifer Kyrnin, About.com

您可以使用已弃用的img属性align =“center”，尽管您不会使用。这种方式标签和样式是混合的，并且，为了恶化，整个图像周围有垂直和水平空间。
```
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way
```
解决此问题的最佳方法是使用CSS。将图像设置为div的背景，然后div的空间将是图像的空间，您可以使用边距将其放置到位。您可以尝试使用these others techniques

CSS background-image技术：

background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0      no-repeat; /* div horizontal center */
background:url('path_to_img') 0      center no-repeat; /* div vertical center */

Answer 5

img {
display: block;
margin-left: auto;
margin-right: auto;
}

它应该工作！它对我有用：D

Answer 6

我试试这个并且工作正常：

在CSS中：

.centreimage {  
    text-align: center; 
}

在HTML中：

<p class="centreimage">
   <img src="Images/blababla.png">
</p>

Answer 7

另一种方式 - 你可以把它包裹在桌子周围。见下文。我们必须在样式表中这样做。

<html>
<table border="0" width="530" >
<td align="center" valign="center">
<img src="http://www.lorempixel.com/100/150" id="test">
</img>
</td>
</table>
</html>

Answer 8

至少在处理定位和对齐时，请考虑学习CSS display属性，这是我认为非常重要的CSS属性。默认情况下，该属性在不同元素上设置为不同的值。 假设position属性设置为static值，block和inline占用了整个父元素的宽度 >。 block将独立行，而inline与其他元素共享行。 p标签和h1之类的元素是块级元素。 span标签和em之类的元素是内联元素。图像但是都不是！

图像的默认显示值为inline-block。这意味着它具有内联和块元素的特性-您可以设置宽度和高度（如块级元素），它与其他元素（如内嵌级元素）在同一行，并且容器是宽度和填充-没有其他内容。

CSS规则text-align: center;将元素放在其容器中。这意味着对于p个元素来说会很好，因为显示设置为“阻止”。但是，对于图像，除非将其放在div（父元素容器）中，否则无法将其居中（因此将不会发生任何事情），因为假设 width设置为100％，则没有任何内容可以居中它，没有什么要对齐的。考虑以下示例：

body * {
  border: 1px solid black;
  text-align: center;
}

<body>
  <p> This is a <span> !!Span element containing!! paragraph !!Span element containing!!</span>about lorem ipsum, the infamous place holder text. Lorem ipsum is supposedly Latin, but not really. That's all. </p>
  <img width = '200' src="https://i.stack.imgur.com/zZTPs.png">
  <p> The display of p is block, span inline, img inline-block. That's why the image's border doesn't stretch and the others do (you may not notice it but they do)</p>
</body>

一个好的解决方法是将显示设置为阻止。这将使ti伸展，以便将其居中放置。一旦有某物作为父容器，以太就会改变显示方式（边框就是您要对齐的内容））或将其包含在div中（该div是您要对其进行对齐的位置），然后对齐即可起作用。

Answer 9

因为它是“文本”对齐的。

该属性旨在按某种方式工作并具有一定的名称。

有趣的是，如果将该属性应用于具有image + text的容器，则对齐方式适用于text和image。

.one{
text-align: center}

<div class="one">
<p>hello pal</p>
<img src="https://cn.i.cdn.ti-platform.com/content/22/showpage/regular-show/za/regularshow-200x200.png">
</div>

文字对齐不能处理图像？

9 个答案: