テキストを画像と垂直方向に揃えるにはどうすればよいですか?

Question

何ですか vertical-align: middleただし、 vertical-align:top は機能しません。 確かに効果があります。

スパン{
  垂直配置: 中央;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>機能しません。</span>
</div>

Answer 1

垂直方向の配置に関する簡単なテクニックをいくつか紹介します:

単一行の垂直方向の配置: 中央

これは簡単です。テキスト要素の行の高さをコンテナの行の高さと同じに設定します

リーリー

複数行の垂直配置:bottom

内部 div をそのコンテナを基準にして絶対的に配置します

リーリー

複数行の垂直方向の配置:middle

リーリー

古いバージョンの IE をサポートする必要がある場合

これを完全に正しく機能させるには、CSS にいくつかの変更を加える必要があります。幸いなことに、IE には私たちに有利に働くバグがあります。コンテナーに top:50% を設定し、内部 div に top:-50% を設定すると、同じ結果が得られます。 IE がサポートしていない別の機能である高度な CSS セレクターを使用して、この 2 つを組み合わせることができます。

リーリー

可変コンテナ高さvertical-align:middle

このソリューションでは transform:translateY 属性を使用するため、他のソリューションよりも若干新しいブラウザが必要です。 (http://caniuse.com/#feat=transforms2d)

次の 3 行の CSS を要素に適用すると、親要素の高さに関係なく、要素が親要素内で垂直方向の中央に配置されます。 リーリー

Answer 2

実際には、この場合、それは非常に簡単です。画像に垂直方向の配置を適用します。すべてが 1 行にあるため、実際に配置しているのはテキストではなく画像です。

リーリー