web-dev-qa-db-ja.com

CSSグリッドを使用して、CSSのオブジェクトを垂直方向に整列させる方法は？

最近、この問題に出会いました。単純な<h1>タグがあり、垂直方向に中央揃えしたい場合、ウィンドウのサイズを変更しても、グリッドボックス行の中央に残り、水平位置は無視されます。

グリッドコンテナに関しては、vertical-alignは効果がないことを知っています。それで解決策は何でしょうか？

この質問は重複としてマークされていますが、他の質問ではテキストの水平方向のセンタリングについて質問していますが、ここでは垂直方向のセンタリングについて質問しています。

csscss3css-grid
10
user5700598

良い質問-ラッパーで問題を回避し、display：tableを使用しました

https://jsfiddle.net/8vjvnznk/

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 300px;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
  align-content: space-evenly;
}

.workaround{
  border: 1px solid green;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: table;
  
}
h1{
  font-size: 1em;
  border: 1px solid yellow;
  display: table-cell;
  vertical-align: middle;
}

#boxc{
 background: red;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 100%;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c" id="boxc">
    <div class="workaround">
      <h1>
        The heading in question!
      </h1>
    </div>
  </div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
3
Happysmithers

テーブルは必要ありません。なぜグリッドをテーブルと混在させるのですか？

align-items:centerを使用して、垂直方向のセンタリングを実現できます。

グリッドセルが<h1>である場合、align-self:centerを使用して、コンテンツを<h1>に垂直方向に中央揃えできます。

17
Gesha