如何使页眉图片居中显示

Question

我有一个问题。其他人的答案没有解决我的问题。

问题出在我的页眉图片上，以下是代码：

HTML

<div id="site">

    <div id="header">
        <img class="center" src="http://i.imgur.com/jfDhpP5.png"/>    
    </div>

    <div id="mainNav">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </div>

</div>

CSS

#container{
    width: 1000px;
    margin: 1em auto;
}

#header{
    display: block;
    width: 1000px;
    margin: 0 auto;
}

body{    
    background-color: grey;
    color: black;
    font-family: sans-serif;
}

img.center{
    text-align:center;
    margin: 0 auto;
    padding:0px;
}

我也试过这个：

div#pictures {
  text-align: center;
}

也不起作用...在Firefox和IE中检查，最新版本.... o.O

请帮帮我！

- user3022396

---

看起来不错：http://jsfiddle.net/j08691/5wr3v/ - j08691

你确定 #site div 居中了吗？ - Huangism

你的链接看起来没问题，但在我的电脑上还是显示有问题 :/。我想不出为什么，它总是左对齐。 - user3022396

Answer 1

header标签的CSS样式

width:100%;
text-align:center;

为你的img添加CSS样式

display:inline-block;
margin: 0 auto;

点击此处查看示例

然而，仅在您的 header 上使用 text-align:center; 应该就可以了，如此这里

- SW4

---

好的，问题出在错误地附加CSS文件上。在<link>中名称有误...无论如何还是谢谢！ - user3022396

Answer 2

感谢SW4的回答，我遇到了一个类似的问题，即在使用头部图像时。我使用了一个矩形图像，并试图将其变成圆形。在修复图像形状和大小后，我又遇到了一个居中显示的问题。

以下是我的代码...

HTML:

<div class= "image-cropper">
<img src="#" class="profile-pic">
</div>

CSS：

.image-cropper {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  display:inline-block;
  margin: 0 auto;
}
.profile-pic {
  display: inline;
  margin: 0 auto;
  margin-left: -15%; /*centers the image*/
  height: auto;
  width: 250px;
}

-- 也许有更好的编码方式，但经过多次尝试和调整像素和百分比，我终于让我的看起来符合预期。

- DougApplegate

Answer 3

除了SW4的回答之外，使用CSS可以有不同的方式来对齐文本。

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
}

div.d {
  text-align: justify;
}

对于任何想要寻找一个很好的入门资源的人，我推荐W3Schools。

- Chioke Aarhus