css - Text-Align:center 图像也居中

Question

每当我在我的 CSS 中居中文本时，它也会使图像居中。这是为什么？文本在一个 div（“左”）内，图像在第二个 div（“右”）内。这是 HTML -

<div class="left">

<p>

BANKS</div>

<div class="right">

<p>

<a href="#"><img src="http://www.dogtraining-hampshire.co.uk/dog_training_classes_puppy_1.jpg" border="0"></a> &nbsp; 

</div>

和 CSS -

#wrapper {
width: 100%;
overflow: auto;
text-align: center;
}

.left, .right {
width:48%;
margin-bottom: 5px;
}
.left {
clear:both;
float:left;
margin-right:1%;
}
.right {
float:right;
margin-left:1%;}
}

我尝试将“#wrapper img”添加到 CSS 并将图像设置为向左浮动，但这也没有奏效。

这是完整的 css 和 html 的 jsfiddle - http://jsfiddle.net/rHEJA/

Answer 1

反对者

否决票的任何理由？我很高兴改变我的答案！

图像是内联元素，因此它们遵守中给出的规则text-align。如果您不希望他们遵循它，您可以很好地给出另一个规则，例如：

#wrapper img {text-align: left;}

或者，以更好的方式，只是为了居中div，您还可以执行以下操作：

.centerDiv {width: 50%; margin: auto;}

这使得<div>居中。

Answer 2

这正是text-align: center;CSS 属性的作用。如果您将其设置为 ，图像也会向右对齐text-align: right;。

您可以更改 CSS 以包含以下内容：

#wrapper img { text-align: left; }