css - 文本对齐 :center centers images too

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

Downvoters

Any reason for the downvote? I am happy to change my answer!

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

#wrapper img {text-align: left;}

或者，以更好的方式，只是将 div 居中，你也可以这样做:

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

这使得 <div>居中。