display:flexで要素の高さは揃えつつ文字は中央に配置する

コンテンツの高さが異なる要素を横並びにしているとき、高い要素に合わせて可変させつつ、コンテンツは真ん中に配置する方法です。

長い文章長い文章長い文章長い文章長い文章長い文章長い文章

短い文章

▼HTML

<div class="demo">
<div class="box red center"><b>長い文章長い文章長い文章長い文章長い文章長い文章長い文章</b></div>
<div class="box green center"><b>短い文章</b></div>
</div>

<div class="box red center"><b>長い文章長い文章長い文章長い文章長い文章長い文章長い文章</b></div>

</div>

▼CSS

.demo {
  /** 高さ揃えるcss**/
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center; /** 真ん中寄せ **/
}
.demo .box {
  width: 200px;
  background: #f71137;
  padding: 20px;
  color: #fff;
  margin: 20px;
  text-align: center;
  /** 以下中央揃え**/
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

}
.demo .green {
  background: #00c1a6;
}

.demo {

/** 高さ揃えるcss**/

display: -webkit-flex;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: center; /** 真ん中寄せ **/

}

.demo .box {

width: 200px;

background: #f71137;

padding: 20px;

color: #fff;

margin: 20px;

text-align: center;

/** 以下中央揃え**/

display: -webkit-box;

display: -ms-flexbox;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

.demo .green {

background: #00c1a6;

}

KOHIMOTO

Miki＋Yuka / 東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナー🌐 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。

【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.

2023.07.19 WEB

Category

display:flexで要素の高さは揃えつつ文字は中央に配置する

Related article

Pick Up