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

任何原因都是downvote？我很乐意改变我的回答！

图片是内嵌元素，因此他们遵守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; }

文本对齐：中心也是图像中心

2 个答案: