-1

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

这是我目前得到的: 在此处输入图像描述

这就是我想要得到的……你可以忽略字体、边框等方面的差异……哈哈 在此处输入图像描述

这是我的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>

谢谢你的时间!

4

2 回答 2

1

您不能混合使用绝对定位和静态定位。您可以使用绝对定位:

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

或静态定位:

margin: 125px auto 0;

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

于 2013-06-12T06:11:52.740 回答
0

以这种方式更改您的 CSS

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

变化

  1. 删除positiontop
  2. 添加topmargin-top.
  3. 定位元素不考虑边距。
于 2013-06-12T05:44:03.443 回答