代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#font-center{
height: 100px;
background-color: aqua;
border: 1px dashed #007acc;
text-align: center;
}
h1{
text-align: center;
height: 100px;
line-height: 100px;
}
#test{
line-height: 100px;
border: #007acc 1px solid;
}
#yuanLi{
height: 200px;
background-color: aqua;
border: 1px dashed #007acc;
text-align: center;
}
#shang{
background-color: bisque;
height: 90px;
width: 50%;
position: relative;
left:25%;
text-align: center;
color: #007acc;
font-family:'Gill Sans';
padding:0 20px;
line-height:45px;
}
#xia{
background-color: bisque;
height: 90px;
width: 50%;
position: relative;
left:25%;
color: #007acc;
font-family:'Gill Sans';
padding:0 20px;
line-height:90px;
text-align: center;
}
</style>
</head>
<body>
<h1>显示样式</h1>
<div id="font-center">
<div id="inner">
<span id="test">垂直居中</span>
</div>
</div>
<h1>单行文字垂直居中原理,忽略边框宽度</h1>
<div id="yuanLi">
<div id="shang">假定文字本身高20px,设置line-height为父容器的高度(这里为200px)后,浏览器会在文字的上方和下方添加高度为[(200-20)/2]像素的空白,从而使文字在视觉效果上垂直于父容器居中</div>
<span>垂直居中</span>
<div id="xia">本部分蓝色div中的上下两处肉色div模拟的就是line-height中用于填充的空白</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。