Home >Web Front-end >CSS Tutorial >css: solution to the problem that list-style dots and text in li are not centered
css: solution to the problem that list-style dots and text in li are not centered
- 黄舟Original
- 2017-06-29 09:32:168136browse
li'slist-styleThe small dots and text are not centered?
<ul>
<li><a>我们开始</a></li>
<li><a2016</a></li></ul>.ul li{
list-style:disc inside;}I feel that the dots and the text are not centered (the dots are a little lower). Is there any way to center them?
<!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>Generally in this situation, I write one by myself using the before pseudo-class,
It’s easy to control by writing a point using span, and remove the list-style of ul
Try itline-height, which is the same height as the current li;
The above is the detailed content of css: solution to the problem that list-style dots and text in li are not centered. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Why does list-style:none in css not work?Next article：Why does list-style:none in css not work?