コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > list-style-image 画像を垂直方向の中央に配置するにはどうすればよいですか?

list-style-image 画像を垂直方向の中央に配置するにはどうすればよいですか?

黄舟
リリース： 2017-06-29 10:20:23
オリジナル
2682 人が閲覧しました

list-style-imageを使用してリスト項目の前に小さなアイコンを設定すると、FFの下に正常に表示されます。 list-style-image 画像は垂直方向の中央に配置されます list-style-image を使用してリスト項目の前に小さなアイコンを設定すると、FF の下に通常表示されます

しかし、中央に配置したい場合は、 IEでは正常に表示されます、死に至るまで不服従。
次善の策は、妥協案を見つけることです。

問題を解決するために ul li の backgrou-image (背景画像) を使用することです。
以下の通り: 

ul li{ 
height:28px; /*列表项的高度*/ 
line-height
:28px; /*列表项的行高，行高与高设为相同，文字垂直居中*/ 
text-indent
:15px; /*文字缩进15个像素，不然压到图表了*/ 
background-image
:url("../images/icon.gif"); /*图片的url地址*/ 
background-position
:left 45%; /*北京图片的定位*/ 
background-repeat
:no-repeat; /*禁止图片平铺，显示一个就好了*/ 
}
ログイン後にコピー

Firefox: li{background-position:left 50%)
IE: li{background-position:left 45%)

具体的な割合はぜひお試しください!

以上がlist-style-image 画像を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
垂直 中心
ソース：php.cn
前の記事：リストスタイル画像アイコンの位置に関するCSSの問題解決 次の記事：list-style-image のアイコン画像の配置問題に対する CSS 解決策
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
さまざまなスタイルのネストされたリスト HTML とリストは私にとって新しいレベルであり、第 3 レベルで英数字タイプを使用し、関連する数字を含むネストされたリストを HTML で作成しようとしています。 body{pa...
から 2024-03-31 16:20:05
0
2
271
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート