圆角对不齐及圆内数字不居中
问题描述：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background: antiquewhite;
}
div{
width: 300px;
background-color: white;
}
h2{
background-color: rgb(233,24,90);
color: white;
font-size: 14px;
font-weight: 500;
line-height: 42px;
padding-left: 5px;
}
span{
font-size: 12px;
color: white;
text-align: center;
font-size: 12px;
line-height: 6px;
width: 15px;
height: 15px;
box-sizing: border-box;
display:inline-block;
color: white;
border-style: solid;
border-width:10px;
border-color: black;
border-radius: 50%;
text-align: center;
}
p{
vertical-align:auto;
font-size: 12px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: gray;
}
</style>
</head>
<body>
<div>
<h2>大家都喜欢买的美容品</h2>
<p><span>1</span> 雅诗兰黛即时修护眼部精华霜 15ml
</p>
<p><span>2</span>
伊丽莎白雅顿显效复合活肤霜 75ml
</p>
<p><span>3</span>
OLAY玉兰油多效修护霜 50g
</p>
<p><span>4</span>
巨型一号丝瓜水320ML
</p>
<p><span>5</span>
倩碧保湿洁肤水2号 200ml
</p>
<p><span>6</span>
比度克细肤淡印霜 30g
</p>
<p><span>7</span>
兰芝（LANEIGE）夜间修护锁水面膜80ml
</p>
<p><span>8</span>
SK-II护肤精华露215ml
</p>
<p><span>9</span>
欧莱雅青春密码活颜精华肌底液
</p>
</div>
</body>
</html>
答
html发一下
你可以试下用flex布局
display:flex;
align-items: center;//垂直居中
justify-content: center;//左右居中
答
span {
display: inline-block;
color: #fff;
background-color: #333;
width: 30px;
height: 30px;
line-height: 30px; // 行高于高度一致，垂直居中
text-align: center; // 文字水平居中
border-radius: 50%;
}