0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vertical-alignの役割

Last updated at Posted at 2019-06-02

#vertical-alignの役割
ブロック要素を縦方向中央に配置させるために、vertical-alignを用いたが失敗した。どうやらvertical-alignはブロック要素に適用できないとのこと。そこでvertical-alignの役割について疑問に思い調べたのでメモとして残しておく。
こちらのサイトを参考にした。

####html

<div class="outer">
    <div class="inner">center</div>
</div>

####CSS

.outer {
    width: 100px;
    height: 100px;
}

.inner {
    vertical-align: middle;
}

div.innerにvertical-alignを適用しても中央に配置されない。では、以下のようにインライン要素にしたら、、、

.inner {
    display: inline;
    vertical-align: middle;
}

これも配置されない。インライン要素になら適用できるんじゃないの???と疑問に思い、さらに調べたところ解決した。
vertical-alignはボックス内の位置を決めるプロパティではなく、同じブロック内のインライン要素どうしの位置関係を決めるものらしい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?