0

私は2つのdivを互いに持っています。両方のdivに境界線を付けましたが、両方のdivをページに対して水平方向と垂直方向の両方で中央に配置したいと思います。同様の質問の解決策を見てきましたが、問題を解決できませんでした。また、ポジショニング、つまり相対的な絶対的な深さについて学ぶことができる優れたリソースを共有してください。

以下は私のHTMLコードです。

<!DOCTYPE html>
<style type="text/css">
    .outer {
        color:black;
        width: 400px;
        height:400px;
        border: 100px solid;
        border-radius:100%;
        border-color: red blue green yellow;
        position: static;
        margin: auto  auto auto auto;
        top:50%;
    }
    .inner{
        color:black;
        width: 100px;
        height:100px;
        border: 50px solid;
        border-radius:100%;
        border-color: red transparent green transparent;
        position: relative;
        top:50%;
        margin: -50px auto auto auto;
    }
</style>
<html>
    <body>
        <div class="outer">
            <div class="inner">
            </div>
        </div>
    </body>
</html>
4

4 に答える 4

1

ほとんどの場合、水平方向のセンタリングはそれほど問題にはなりません。margin: 0 autoにスタイルを追加するdivと、ほとんどの場合、必要な処理が実行されます。

ただし、垂直方向のセンタリングはもう少し複雑なようです。垂直方向のセンタリングの6つのオプションのリストは、次のとおりです。http: //www.vanseodesign.com/css/vertical-centering/

また、その記事の「追加リソース」セクションにも注意してください。このセクションには、いくつかの優れたリファレンスもリストされています。

于 2012-06-26T13:53:58.333 に答える
1

両方のボックスのサイズがわかっていて、サイズが変わらない場合は、次を使用できます。

.outer {
  color:black;
  width: 400px;
  height:400px;
  border: 10px solid;
  border-color: red blue green yellow;
  position: absolute;
  margin: -200px  auto auto -200px;
  top:50%;
  left: 50%;
}
.inner{
  color:black;
  width: 100px;
  height:100px;
  border: 5px solid;
  border-color: red transparent green transparent;
  position: absolute;
  top:50%;
  left: 50%;
  margin: -50px auto auto -50px;
}​

境界線の半径を取り出し、境界線のサイズを狭くして、ポイントをより明確にしたことに注意してください。

基本的に、相対単位 (%) で絶対配置を使用できますが、ボックスのサイズの半分である固定の負のマージンを使用します。

JS フィドルを見る

于 2012-06-26T13:52:33.760 に答える
0

div をページの中央に配置するスマートな方法は、display:table および display:table-cell メソッドを使用することです。

HTML:

<div class="wrapper"> 
<div class="box"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis pretium arcu, eget semper lacus. Aliquam aliquam, augue non bibendum pretium, felis neque eleifend tortor, ut luctus mi ante vel nisl. Mauris id enim elit.
</p> 
</div> 
</div>

CSS:

html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;}

.wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}

.box {
background-color: red;
display: inline-block;
text-align: center;
padding:10px;
width: 100px;
height:auto;
}

ライブデモを見る:

http://jsfiddle.net/Narppavi/ej6yL/

于 2014-03-17T10:05:09.587 に答える
0

divの実際のheight&widthは を含めて 200pxbordersです。したがって、内部では、左と上のマージンを次のように設定しますactual size/2。

.inner{
  ...
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;


}
于 2012-06-26T14:02:00.713 に答える