2

以前の質問を読んで解決策を試みましたが、うまくいかないようです。

私の Bootstrap HTML の例は非常に単純です。

...
<body>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span4" class="centering">
        span4
      </div>
      <div class="span8" class="centering">
        span8               
      </div>
    </div>
  </div>
</body>
...

クラスを記述する CSScenteringは次のとおりです。

.centering {
  float:none;
  margin:0 auto;
}

ブラウザは、ブラウザ ウィンドウの垂直方向の中央ではなく、ブラウザ ウィンドウの上部にテキストspan4を配置することで、このコードをレンダリングします。span8これを設定する際に私が見落としたものは何ですか?

4

1 に答える 1

0

これが実際のシナリオであなたにとって非常に実用的かどうかはわかりませんが、とにかく一見の価値があります:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body{height:100%; margin:0;padding:0}

.container-fluid{
    height:100%;
    display:table;
    width: 100%;
}

.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}

.centering {
  float:none;
  margin:0 auto;
}
</style>

</head>
<body>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span4" class="centering">
        span4
      </div>
      <div class="span8" class="centering">
        span8               
      </div>
    </div>
  </div>
</body>
</html>
于 2013-05-02T10:40:41.233 に答える