ホームページ >ウェブフロントエンド >CSSチュートリアル >css：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策
css：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策
- 黄舟オリジナル
- 2017-06-29 09:32:168135ブラウズ
liのリスト風小さな点と文字が中央に配置されていませんか？
<ul>
<li><a>我们开始</a></li>
<li><a2016</a></li></ul>.ul li{
list-style:disc inside;}ドットとテキストが中央に配置されていないように感じます（ドットが少し下にあります）中央に配置する方法はありますか？
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo</title></head><style type="text/css">
*{padding:0; margin:0; list-style:none;}
.list{ width:600px; margin:10px auto;}
.list li:before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:#000;
display:inline-block;
margin-right:5px;
vertical-align:middle;
margin-top:-3px;}
</style>
<body>
<ul class="list">
<li>呵呵!</li>
<li>别说话吻我</li>
<li>小火车怎么这么污?</li>
</ul></body></html>通常、この状況では、 before 疑似クラスを使用して自分で作成します
ul
のリストスタイルを削除して試してみると、spanを使用して制御するのが簡単になります。 line-height 、現在の li; の高さと同じ
以上がcss：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。