上下中央寄せができません。

Question

vertical-align: middle;を使用した上下中央寄せができません。
調べるとsmallタグはインライン要素なのでvartical-align: middle;が指定できるはずなのですができませんでした。
原因わかりますか？

試したコード

<div class="copyright_container">
      <small class="copyright">
        copyright(C) 2021 All Rights Reserved.
      </small><!-- /.copyright -->
    </div><!-- /.copyright_container -->

  .copyright_container {
    background-color: #333;
    text-align: center;
    height: 80px;
  }

  .copyright {
    color: #fff;
    font-size: 14px;
    line-height: 1.14;
    vertical-align: middle;
  }

Answer 1

原因わかりますか？

要素の中央を親要素の baseline + x-height の半分 に揃えます。

vertical-align - CSS: カスケーディングスタイルシート | MDN

ということですので、他のインライン要素がないため、親要素は同じベースラインを持つので意味がないです。
line-height: 80px;などとすればそれっぽくなりますが、インライン要素の配置はとてもややこしいので、vertical-align で垂直中央配置をするのはお勧めできません。フレックスレイアウトを使うのがお手軽でいいと思います。

.copyright_container {
	background-color: #333;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

Comments

[7777tata]

参考になりました。ありがとうございました。