在CSS中并没有可以让文字在盒子里垂直居中的方法，所以我们可以让文字的行高等于盒子的高度，就可实现文字在当前盒子内垂直居中。
至于这是为什么呢？
因为
文字行高包括3部分：上空隙、文字内容、下空隙。
如果规定盒子高度为50px，文字大小14px，并在此规定文字行高为50px，则上下空隙平分为(50-14)/2=18px，这样文字就恰好在这个盒子中垂直居中。
<style>
a{
/*这里将a改变为块元素*/
display:block;
width: 200px;
height: 50px;/*盒子高度*/
font-size: 14px;/*字体大小*/
line-height: 50px;/*文字行高*/
}
</style>例子：做个样式如下（其中文字部分为链接）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a{
/*这里将a改变为块元素*/
display:block;
width: 200px;
height: 50px;/*盒子高度*/
background-color: rgb(10, 10, 10);
font-size: 14px;/*字体大小*/
color: #fff;
text-decoration: none;
text-indent: 2em;/*缩进2个字符*/
line-height: 50px;/*文字行高*/
}
a:hover{
background-color: rgb(221, 79, 14);
}
</style>
</head>
<body>
<a href="#">手机</a>
<a href="#">电脑</a>
<a href="#">配件 耳机</a>
<a href="#">电话卡</a>
<a href="#">出行 穿戴</a>
</body>
</html>
（新手小白记录日常学习，如有错误，欢迎指正！）
扫一扫
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
