161

以下の例では、#logoは絶対に配置されており、 内で水平方向に中央揃えにする必要があります#header。通常、margin:0 auto相対的に配置された要素に対して を実行しますが、ここで立ち往生しています。誰か道を教えてくれませんか？

JS フィドル: http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}
4

6 に答える 6

19

回答にの使用がありませんでしたcalc。これはよりクリーンなソリューションです。

#logo {
  position: absolute;
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background: red;
}

jsフィドル

最新のほとんどのブラウザーで動作します: http://caniuse.com/calc

フォールバックなしで使用するのは時期尚早かもしれませんが、将来の訪問者にとっては役立つかもしれないと思いました.

于 2013-05-26T11:04:07.540 に答える
4

絶対位置としてdivを中央に配置するためのベストプラクティスの方法は次のとおりです

デモフィドル

コード --

#header {
background:black;
height:90px;
width:100%;
position:relative; // you forgot this, this is very important
}

#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin: auto; // margin auto works just you need to put top left bottom right as 0
top:0;
bottom:0;
left:0;
right:0;
}
于 2013-05-26T10:18:02.067 に答える
2

簡単です。次のように相対ボックスでラップするだけです。

<div class="relative">
 <div class="absolute">LOGO</div>
</div>

相対ボックスにはマージンがあります: 0 Auto; そして、重要なのは、幅...

于 2014-07-17T13:31:42.090 に答える