-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. positionと を取り外しtopます。
  2. topasを追加しmargin-topます。
  3. 配置された要素はマージンを考慮しません。
于 2013-06-12T05:44:03.443 に答える