Question

我对CSS编码很新。我试图将图像居中，但无法将其置于中心位置。据我所知，相关代码如下：

CSS代码：

 #header img {
    align: center;
    margin-top: 5px;
    margin-left: 10px;
}

HTML文件中的代码：

<div id="header">
<a href="$settings[shopurl]">
<img src="https://capa.lunarmania.com:2083/cpsess1188922546/viewer/home%2famysp0%2fpublic_html%2fimages/AmyPromos.png" border="0" align="center" alt="" />
</a>
</div>

我觉得好像我错过了一些东西，但我找不到它或弄明白了。任何帮助都表示赞赏。图像顽固地位于网页的左上角，而不是像我要求的那样居中在标题中。

Answer 1

一些问题。首先，它是text-align，而不是align。

CSS中的内容有时并不像设置text-align: center那么简单。有时候，你会有一个与其内容一样大的块级元素;在这种情况下，如果你的div与图像一样大，它将不会使图像居中，因为它在div中居中不会移动它。确保您的div也居中，或者它与您想要居中的图像一样大。

此外，text-align: center会影响内部元素，而不是元素本身。因此，在这种情况下，您需要#header上的居中CSS，而不仅仅是图像。

最后，如果你想要自己将元素物理地居中，它需要是一个块级元素（即display: block，这是div的默认值）并且在左侧和右侧都有一个自动边距。这可以通过将margin-left和margin-right设置为auto，或使用margin: topbottom auto或margin: top auto bottom之类的简写来实现。

在这种特殊情况下，您可能只想在text-align: center元素上设置#header，但一般来说，“居中图像”有时候比一行更复杂。

Answer 2

您需要将文本居中放在#header中心，而不是居中图像。看看这个小提琴：http://jsfiddle.net/10py5mu6/

#header {
    width: 600px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: solid 1px #000;
}

居中标题图像

2 个答案: