[解決済み] 画像の横のテキストを縦に揃える?
2022-03-17 23:18:03
質問
なぜ
vertical-align: middle
は動作しますか? それなのに
vertical-align: top
する
を働かせる。
span{
vertical-align: middle;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>
解決方法は?
実は、この場合はとても簡単で、画像に垂直方向のアライメントを適用するのです。1行で完結しているので、整列させたいのはテキストではなく画像なのです。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>
FF3でテストしています。
これで、この種のレイアウトにフレックスボックスが使えるようになりました。
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>
関連
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?