前端技巧——⼿动调整⽂字的对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html span 居中
div{                                        #div的样式
width: 300px;
height: 30px;
border:1px solid #51ffe6;
line-height: 30px;
}
span{
display: inline-block;            #不独占⼀⾏的块级元素
vertical-align:middle ;          #使元素垂直居中
width: 20px;
height: 8px;
background-color: pink;
margin—top:8px;
}
</style>
</head>
<body>
<div>
<span></span>⽂字
</div>
</body>
</html>
加上 vertical-align:middle ；后通过⾕歌浏览器打开，效果如下图：
点击⿏标右键到检查，后结果如图：
选中代码区的span标签
在右端则显⽰了对应的属性和属性值，
如图，可以通过修改margin_top 的值来改变粉⾊框框与⽂字对齐，这样便于得出⾃⼰想要的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。