0 
CODE:
*{
  margin:0px;
  padding:0px;
}
body{
  font-family:sans-serif;
  width:1024px;
  height:700px;
  border:1px solid green;

  //margin:0 auto;

  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
}

1.私はすべての側面から中央に配置されたボックスを期待していましたが、ボックスモデルの上部はボディの先頭にあります.margin-top:20pxを明示的に設定すると、ボックスモデルは下に移動しますが、上部が他のように自動的に整列しないのはなぜですか.

2.また、センタリングを達成するための自動値「DOES」を取得できませんでした

  1. margin:0 の場合 auto; // 0 の単位は?px、em、または pt.
4

3 に答える 3

3

Css での垂直方向の配置は、楽しくてつらいトピックです。このstackoverflow questonは、垂直方向の配置が非常に苦痛になる理由について、私が見た中で最も簡潔な説明です

あなたの最初の質問に関しては、マージンを使用して垂直方向に整列できない理由は、以下の引用で説明されています。

... ドキュメント フローと要素の高さの計算アルゴリズムの性質により、要素を親の内側で垂直方向に中央揃えするために余白を使用することはできません。垂直マージンの値が変更されるたびに、親要素の高さの再計算 (リフロー) がトリガーされ、元の要素の再中心化がトリガーされ、無限ループになります。

2 番目の質問に関して、 margin auto は、親の幅に対する子コンテナーの幅を計算することにより、水平方向のセンタリングを実現します。次に、単純な計算を行って、子コンテナーの左右に均等な量のマージンを追加し、水平方向の中央揃えを強制します。

2問目のパートBは、

margin: auto以下と同じです。

margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;

ここで、asmargin: 0 autoは次と同等です。

margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;

垂直センタリングを実現するソリューション

ただし、制限があるにもかかわらず、垂直方向の配置を実現するために利用できるオプションがいくつかあります。最も簡単なのはテーブルを活用することです。テーブルの数少ない長所の 1 つは、vertical-alignプロパティを使用すると、テーブル内で適用されたときに実際に期待どおりに動作することです。したがって、次のようなことができます。

<body>
    <table style="width: 100%; height: 100%">
         <tr>
              <td>
                   <div id="verticallyCenteredContent" style="vertical-align: middle">
                      OMG it's vertically aligned
                   </div>
              <td>
         <tr>
    <table>
<body>

このjsfiddleで説明した他の 2 つの一般的な方法があります。

垂直センタリングを実現するための多くのシナリオとアプローチを示す便利な記事 - Vertical Centering with Css

乾杯！

于 2013-07-13T05:49:15.520 に答える
0

CSS マージンの問題 に関するもう 1 つのリソースを次に示します。http://techslate.net/Looking-at-css-margins/

于 2013-07-15T05:48:03.043 に答える
0

まず、css を使用して、「Div」を水平方向にセンタリングします。その後、javascriptを使用して垂直方向に中央揃えします。jsfiddle HTMLのデモを参照してください。

<div class="center">Div content</div>

CSS:

.center {
    font-family:sans-serif;
    width:300px;
    height:300px;
    border:1px solid green;
    margin: 0 auto;
    text-align:center;
}

JS (JQuery):

$().ready(function () {
    $(".center").css("margin-top", ($(window).height() - 300) / 2);
});

jsfiddle のデモを見る

于 2013-07-13T05:57:35.457 に答える