[解決済み】大きなフォントアウターアイコンでテキストを縦方向にセンタリングする方法は?
2022-04-04 08:07:59
質問
例えば、font-awesomeアイコンといくつかのテキストを含むbootstrapボタンがあるとします。
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
テキストを垂直方向に中央揃えで表示するには? 現在、テキストはアイコンの下辺に配置されています。 http://jsfiddle.net/V7DLm/1/
解決方法は?
すべての提案されたオプションを考慮した後、最もきれいな解決策は、line-heightとvertical-alignをすべて設定することであると思われます。
参照 Jsfiddleデモ
CSSです。
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
vertical-align: middle;
}
関連
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み】Font-awesome、入力タイプ'submit'
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】位置固定が機能しない
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] ホバー時に背景画像を暗くする
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?