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 LABO

WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。

【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。

2024.06.09 プロジェクト

Category

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

Related article

Pick Up