[CSS]仮想要素を使用してinline-block要素を垂直方向に中央に配置する

Last Updated:2023年07月17日| コメントを残す

仮想要素(Pseudo Element)は インラインブロック 要素として機能するので、 vertical-align:middle ルールを使用して、他の インラインブロック 要素(ログなど)を中央に配置することができます。 そして画面の両要素を合わせるために、マイナスマージン(margin)の値を追加するようにします。

例:

HTMLサンプル:

<div id="header">
<div id="logo">
<img src="http://abload.de/img/unbenannt-1bmq5b.png" alt=""/>
</div>
</div>

CSSサンプル:

#header{
width:100%;
height:4rem;
background:silver;
}

#header div{
display:inline-block;
vertical-align:middle;
height:100%;
}

#header #logo{
width:75%;
}

#header #logo:before{
content:' ';
display:inline-block;
vertical-align:middle;
height:100%;
margin-left: -4px;
}

#header #logo img{
max-width:100%;
vertical-align:middle;
}

そしてDIVを垂直方向の配置する別の方法で この記事も参考にしてください。

参照:

メモ:


コメントを残す

コメント