如何使标题图像居中答案

【问题标题】：How to center a header image如何使标题图像居中
【发布时间】：2013-12-07 14:09:18
【问题描述】：

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

这是关于我的标题中的图像，这是代码：

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

请帮忙！

【问题讨论】：

看起来不错：jsfiddle.net/j08691/5wr3v
你确定#site div 居中吗？
您的链接似乎很好。但在我的电脑上，它仍然很糟糕：/。想不通为什么。它总是左对齐。

标签： css image center

【解决方案1】：

header 的 CSS

width:100%;
text-align:center;

img 的 CSS

display:inline-block;
margin: 0 auto;

See example here

也就是说，只需在您的header 上添加text-align:center; 即可，as in here

【讨论】：

好吧，这是关于错误附加 css 文件的问题。中的名称有误...谢谢！

【解决方案2】：

要添加到 SW4 的答案，有多种方法可以将文本与 CSS 对齐。

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
}

div.d {
  text-align: justify;
}

对于正在寻找出色的入门资源的任何人，我建议您使用 W3Schools。

【讨论】：

【解决方案3】：

感谢 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;
}

-- 有人可能有更好的编码方式，但经过几次尝试并弄乱了 px 和 %，我终于让我的看起来像我想要的那样。

【讨论】：