こんにちは、スカイドアホールディングスのmedia事業部です。

テキストやイメージを縦の中央に揃えたいのに、うまくいかない。その方法は何だろう？という方のためにその解決案を書きたいと思います。

疑似要素beforeかafterを使用する

縦中央揃えをする要素の前に擬似要素を使ってdisplayはinline-block,heightは100％に指定する。

そして縦中央揃えをする要素にvertical-align:middleを指定すると、疑似要素に沿って縦中央配置が適用されるようになります。

htmlコード

<div class="wrap">
   <div class="wrap-inner">
       <p>テキストテキストテキスト。テキストテキストテキスト</p>
   </div>
</div>

cssコード

.wrap { 
  text-align: center;
  height: 300px;
  background:#000;
}
.wrap:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.wrap-inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  background-color: #c00;
}
.wrap-inner p {
  background:#ffffff;
  text-align: left;
}

さいご

いかかでしょうか？解決OKでしょうか？
他にもいろいろ方法がありますが、今度ご紹介したいと思います。

では。