3

要素の中央に CSS 水平メニューを表示しheader、ブラウザー ウィンドウのサイズを変更するときに中央にとどまるようにしたいと考えています。もちろん試してみmargin: auto;ましたが、うまくいきませんでした。

jsfiddle コード

header .center {
  background: url(../images/header-center.png) no-repeat;
  width: 510px;
  height: 100%;
  /*margin: auto;*/
}
4

2 に答える 2

5

を超えて、とを削除しmargin: 0 auto;て も変更する必要があります。#navigationposition: absolute;left: 260px;

また、メニューに大きなサイズを指定し、クラス#navigationでそれを含むヘッダーに小さなサイズを指定していることにも注意してください。.center

問題の完全な修正:

header .center {
  background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat;
  width: 510px;
  height: 100%;
  margin: 0 auto;
}

#navigation {
  width: 705px;
  height: 50px;
  overflow: visible;
}

コードが機能しなかった理由は、margin: auto技術的に機能するはずの操作を行っていたためです。これは、上、右、下、左にマージンを与えているためです。autoこれはすべて問題#navigationありませんが、まだ許可されていない位置プロパティがあります。あなたはそれを中心に置きます。

最後の教訓として：

、などmarginを宣言するたびに、 2 種類の簡略記法を使用して、すべての側面を処理できます。paddingborder

margin: 0 auto意味：上下マージン0、左右マージンauto。

于 2013-08-10T01:12:20.427 に答える
-1

どうぞ

header .center {background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat; width: 510px; height: 100%; margin: 0 auto;}

#navigation {width: 705px;height: 50px; left: 50%; overflow: visible; margin-left: -255px;}

これは、常に親コンテナーの幅 510px の半分である必要があります。

于 2013-08-10T08:01:29.130 に答える