为什么我的图像的左侧在中心而不是实际的中心？

Question

我想要完成的是将图像块放到横幅的中心。发生的事情是图像的左边缘是中心的东西。如何将图像的实际中心放到横幅的中心？我希望这有道理......哈哈。

这是我目前得到的：

这就是我想要的......你可以忽略字体，边框等方面的差异。大声笑

这是我的css：

#profile-banner {
    background: #000;
    height: 267px;
    border-bottom: 1px solid #999;
    margin: 0px 0px 25px 0px;
    text-align: center;
}

#profile-banner h1 {
    font-size: 36px;
    font-family: Piximisa;
    letter-spacing: 5px;
    padding: 15px;
    margin: 0px;
}

#profile-banner p {
    margin: 0px;
    padding: 0px;

}

#profile-banner .logo {
    top: 125px;
    background: #333;
    border: 1px solid #666;
    width: 250px;
    height: 250px;
    position: absolute;
    margin: 0 auto;
    padding: 0px;
}

这是我的HTML：

<div id="profile-banner">
     <h1>Some Team Name</h1>
     <p>
         Some catchy slogan.
     </p>
     <img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>

谢谢你的时间！

Answer 1

您无法混合绝对和静态定位。您可以使用绝对定位：

position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;

或静态定位：

margin: 125px auto 0;

主要区别在于元素如何影响其他元素。使用绝对定位会将元素从文档流中取出，因此不会影响其他元素。

Answer 2

以这种方式更改CSS

#profile-banner .logo {
    margin: 125px auto 0;
    background: #333;
    border: 1px solid #666;
    width: 250px;
    height: 250px;
    padding: 0px;
}

<强>更改

1. 删除position和top。
2. 将top添加为margin-top。
3. 定位元素不尊重边距。