テキストや画像など、要素の中央に寄せたいときはこんな方法でやる
- table-cellを使う
- テキストが1行の時
- flexを使う
table-cellを使う
- <div class="class">
- テキスト
- </div>
- .class {
- display: table-cell;
- vertical-align: middle;
- height: 100px;
- }
自分ではあまり使わないかも
テキストが1行の時
- .class {
- line-height: 100px;
- }
これで高さ100pxの中央に配置される。
flexを使う
- .class {
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
- }
よく使う、ブラウザの対応に注意する必要がある。
Can i use でflexをチェック
コメント一覧
まだ、コメントがありません