1

現在、PSDデザインをHTMLサイトに変更しています。しかし、私は問題に直面しました。特定の要素を中央に配置できません。私はいつものトリックをすべて試しました。

http://lowhop.net/

ここを参照してください。メインの青いヘッダーが線から外れています（中央に配置されていません）。私は試した

#slider{ position:absolute; left:0; right:0; margin-left:auto; margin-right:auto;

以前は、しかし、それは確実に機能しませんでした。（私の画面解像度/ブラウザでのみ動作するように見えました）。

ありがとう

4

4 に答える 4

3

width中央揃えに使用する場合は、要素にを明示的に定義する必要がありますmargin: 0 auto。

ブロック要素は、明示的に幅を指定しない限り、使用可能なビューポートの幅全体を占めます。

于 2013-03-01T18:12:07.770 に答える
2

スライダーDIVの幅を明示的に設定しているので、別のトリックを使用して中央に配置できます。

#slider 
{
  z-index: 2;
  background-image: url(../img/sliderbg_09_09.png);
  position: absolute;
  display: block;
  width: 982px;
  height: 251px;
  left: 50%;
  margin-left: -491px; /** half DIV width */
}

私はおそらくこれを絶対的な位置のDIVとして持つことから遠ざかるでしょう、それがそれを必要とするようには見えませんが、それは速くて汚いセンタリングです:)

お役に立てば幸い

于 2013-03-01T18:18:30.807 に答える
0

絶対測位を使用する必要がある場合は、ここで私の答えのようなものを使用できます。

基本的に、要素の明示的な幅を宣言してから、それを指定します

left: 50%;
margin-left: -[your width/2];
于 2013-03-01T18:18:38.560 に答える
0

言及されたユーザーshowdevのように：

絶対に配置する必要がありますか？中央に配置する必要もありますか？margin-left：85pxを追加するだけで、div＃navBarを配置したようです。div＃sliderにも同じ方法を使用できるようです。

あなたが持っている

#navBar {
  background-image: url("../img/navbg_07.png");
  display: block;
  height: 38px;
  margin-left: 85px; /* attention on this */
  margin-top: 31px;
  position: relative;
  width: 879px;
  z-index: 1;
}

この

#slider {
  background-image: url("../img/sliderbg_09_09.png");
  display: block;
  height: 251px;
  position: absolute;
  width: 982px;
  z-index: 2;
}

したがって、「margin-left：85px;」を試してください。あなたの#slider。

于 2013-03-01T18:19:21.837 に答える