ボタン内のテキストとアイコンの垂直方向の位置関係
2023-09-26 06:13:42
質問
Bootstrapフレームワークの下でボタン内のテキストとfont-awesomeアイコンを垂直に揃えるのに苦労しています。line-height を設定するなど、多くのことを試しましたが、何もうまくいきません。
<button id="edit-listing-form-house_Continue"
class="btn btn-large btn-primary"
style=""
value=""
name="Continue"
type="submit">
Continue
<i class="icon-ok" style="font-size:40px;"></i>
</button>
どうすればこれを使えるようになりますか?
どのように解決するのですか?
で設定されているルールがあります。
font-awesome.css
で設定されているルールがありますが、これはオーバーライドする必要があります。
オーバーライドはインラインではなくCSSファイルで設定する必要がありますが、基本的にはicon-okのクラスが
vertical-align: baseline;
をデフォルトで設定しているため、ここで修正しました。
<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
<span>Continue</span>
<i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>
例はこちら。 http://jsfiddle.net/fPXFY/4/ と出力されます。
この例では、上のアイコンのフォントサイズを小さくして
30px
では大きすぎるように感じるので
40px
で大きすぎるように感じますが、これは純粋に個人的な見解です。必要であれば、ボタンのパディングを増やして補うことができます。
<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
<span>Continue</span>
<i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>
プロデュース http://jsfiddle.net/fPXFY/5/ という出力があります。
関連
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み】大きなフォントアウターアイコンでテキストを縦方向にセンタリングする方法は?
-
[解決済み】Font-awesome、入力タイプ'submit'
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] jqueryなしでtwitter bootstrapを使用できますか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] SCSSファイルエラー。インポートするファイルが見つからないか読めません: bootstrap
-
[解決済み] BootstrapでNavbarが折りたたまれない
-
[解決済み】大きなフォントアウターアイコンでテキストを縦方向にセンタリングする方法は?
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
-
[解決済み] Twitter ブートストラップ スクロール可能なテーブル
-
[解決済み] BootstrapとjQuery Validationプラグイン
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] Bootstrapプロジェクトでnormalize.cssを使うべきですか?