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

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

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
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート