Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vertical-alignの役割

More than 1 year has passed since last update.

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はボックス内の位置を決めるプロパティではなく、同じブロック内のインライン要素どうしの位置関係を決めるものらしい。

Daiki800
CAE解析やってます。基礎から勉強しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away