0

アプリ ストア ページのような小さなサイトを作成していますが、div .game-dark の途中ですべての要素を揃えることができません。

<div class="row">
<div class="game-dark col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <div class="number col-lg-1 col-md-1 col-sm-1 col-xs-1">
        <p>1</p>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
        <img src="img/kings-empire.png" alt="Kings Empire" title="Kings Empire" class="thumb img-responsive">
        </div>
        <div class="col-lg-8 col-md-8 col-sm-7 col-xs-5">
        <h2 class="game-name">Kings Empire</h2>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
            <button type="button" class="btn btn-default">Скачать</button>
        </div>

</div>

私の場合、中央のすべての要素を垂直方向に揃えるにはどうすればよいですか?

実際の例 -こちら

4

2 に答える 2

1

これを実現する方法は複数あります。

ここで簡単な方法：

これをcssに追加します

.game-dark {
  line-height: 100px;
}

マージンなし<p>

.number p {
  margin: 0;
}

max-height を img に設定する

.img-responsive {
  min-height: 45px;
  min-width: 45px;
  max-height: 100px;
}

マージン/パディングを削除h2

h2.game-name {
  margin:0;
  padding: 0;
  line-height: 100px
}

その他の方法はこちらhttp://www.vanseodesign.com/css/vertical-centering/

于 2013-10-31T13:47:30.590 に答える
1

最初にonに設定line-heightし、画像からスタイルを削除します。これにより、最後の div から 2 番目を除くすべてが整列されます。上マージンと下マージンを 0 に設定し、さらに に設定します。98px.game-dark.col-lg-12.col-md-12.col-sm-12.col-xs-12display: blockh2line-height98px

于 2013-10-31T13:49:09.073 に答える