0

私は次のcssスニペットに出くわしました。ID検索バーの要素に絶対位置、幅300px、高さ27pxを与え、検索バー50%を通常の位置から設定します

#search_bar {
  position:relative;
  width: 300px;
  left:50%;
  height:27px;
}

しかし、検索バーが中央に配置されていません。何故ですか ？しかし、スニペットを次のように変更すると：

#search_bar {
  position:relative;
  width: 300px;
  margin-left:-150px;
  left:50%;
  height:27px;
}

ページの中央に揃えられます。どうですか？プロパティmargin-left:-150pxはそれを中央に設定するために何をしますか？

4

3 に答える 3

2

左: 50% は、バーの開始位置を画面の中央に配置します。中央ではありません。ただし、バーの幅 (300px) がわかっている場合は、その半分の左に移動すると、バーの中央が画面の中央になります。それは理にかなっていますか？150 は 300 の幅の半分です。バーの幅が 400 の場合、-200 を使用する必要があります。

于 2013-02-10T06:49:36.323 に答える
2

これは、絶対位置を使用しているため、負のマージンが要素の幅の半分であるため、要素が全体の幅の 1/2 だけ後ろに移動するためです。

position: absolute;
left: 50%; /* This shifts the element 50% from left, if you 
             don't want to use negative margins you can use 45%, 40% but you need 
             to fiddle with the measurements first */

ここに画像の説明を入力

したがって、計算は次のようになります

コンテナの全幅1000px

エレメント幅300px

left:左から50%開始することを意味します500px800px

それで、これは中心ではありませんか？

したがって-150px、500px/* 500 からここに残ります: 50% */

から要素を取得350pxします650px

于 2013-02-10T06:49:44.887 に答える
0

相対位置を使用することで、ブロックがstatic. left: 50%おそらくビューポート（別名ブラウザウィンドウ）である、含まれている配置されたブロックの半分にマージンの左側を配置します。 margin-left: -150px次に、マージン ボックスの左側を現在の位置のマージン ボックスから 150 ピクセル左に移動します。合計幅は 300px であるため、境界線/コンテンツ ボックスは配置されたブロックに対して中央に配置されます。

于 2013-02-10T06:49:44.503 に答える