未熟学生エンジニアのブログ

TetsuFeの個人開発ブログ

TetsuFeはテツエフイー と読みます。FlutterやWeb周り全般、チーム開発について語るブログ

cssの位置指定をだいたい網羅する

cssでなかなか思った位置に配置できない問題

    1. 横方向の中央揃え
    1. 縦方向の中央揃え
    1. 左端じゃなくて、微妙に位置を動かしたい
    1. 前後の重なり(背景など)

注意

この記事では単体の要素の位置指定だけを取り扱います。2カラムレイアウトなどは取り扱いません。 後半は結構丸投げです

その前に:うまくいかない時に考えるべきこと

  • inline, inline-block, blockの3つのうちどれ
  • 今書いたコードが問題か、その親要素が問題か
    • その要素のさらに親要素は上のinline, blockなどうちどれか?
  • 今のシチュエーションとその方法は合っているか
    • cssにはいろんな位置指定の方法がある。別の方法でいけるかもしれない
  • その要素の高さ or 幅は100%か
    • inline要素は高さ・幅が小さい。中央揃えになっていても気づかない時がある
    • デベロッパーツールで余白も含めて幅をちゃんと確認しよう

1. 横方向の中央揃え

  • text-align: center
  • margin: auto
  • flexbox

対象になるhtml

<div class="wrapper">
    <img src="URL" width=600 height=400>
    <p>この要素を左右中央に寄せたい</p>
</div>

text-align: center

text-align: centerは、これを適用した要素の中にある要素を横方向に中欧揃えします。 ただし、横幅が100%の場合は中欧揃えになっても見た目が変わらないので注意しましょう。 100%になっているかどうかは、ブラウザのデベロッパーツールを使って確認するとよいでしょう

.wrapper {
    text-align: center;
}

margin: auto

divなどのブロック要素の場合、text-alignでは横方向に中欧揃えにならないことがあります。 そんなときはmargin: autoを使います。 これを使うとブロック要素でも中欧揃えになります

.wrapper {
    margin: 0 auto /* 上下のmarginは0、左右のmarginがauto */
}

flexbox

これはあまりわかっていないのですが、特に縦方向の中欧揃えと組み合わせるときにコードが簡潔になるようです。 対応していないブラウザがあるのか、使い方がわからない人が多いのか、まだ普及度は低そうな印象です

.wrapper {
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
}

2. 縦方向の中央揃え

  • vertical-align: middle と table-cell(or inline-block)の組み合わせ
  • position:absolute; left: 50%; width: 100%;

vertical-align: middle

インライン要素であれば、vertical-align: middleが使えます

対象になるhtml

<div class="wrapper">
    <img src="URL" width=600 height=400>
    <p>この要素を上下中央に寄せたい(ならないことも)</p>
</div>
.wrapper {
    vertical-align: middle
}

vertical-align と table-cell(or inline-block)の組み合わせ

ブロック要素単位で縦方向に中欧揃えしたい場合は、display: tableとtable-cellを使いましょう http://kimizuka.hatenablog.com/entry/2014/03/16/233158

html, body {
    width: 100%; height: 100%;
}

section {
    display: table;
}

div {
    display: table-cell
    vertical-align: middle;
}

position:absolute; left: xx%; top: xx% width: xx%;height: xx%;

- この方法は正確に中央揃えできるわけではないです。うまく大きさとtopを揃えたりして場所を調節しましょう。
<div class="wrapper">
    <img src="URL" width=600 height=400>
    <p>この要素を上下左右中央に寄せたい</p>
</div>
  .wrapper p {
    position: absolute; top: 30%; left: 0; width: 100%; height: 100%; 
  }

3. 左端じゃなくて、微妙に位置を動かしたい

ここによくまとまっています https://saruwakakun.com/html-css/basic/relative-absolute-fixed

4. 前後の重なり

よく参考にするサイト

  • サルワカ https://saruwakakun.com/
    • 実例がわかりやすいし、網羅的で体系的なのが嬉しい。辞書を引くと近くの単語も知れるみたいな感じ