详细描述
p标签中设置了块元素,但是如果内容有2个em,但块元素是有5个em长,
实际效果是从左到右显示开来,但并不是绝对的垂直居中。
如果不定义块元素,用margin:0 auto;来定义p标签好像也没办法。
截图
代码
*{margin: 0;padding: 0;}
html{height: 100%;}
body{
color: white;
font-size:125%;
}
.header{
display: flex;
align-items:center;
background-color:#68cdd5;
padding: 2.5em 50%;
width: 2%;
}
.header p{
display: block;
position:absolute;
}
.header p h2;{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="task3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>task3</title>
</head>
<body>
<div class="header"><img src="01.png"></div>
<div class="main"><img src="02.png"></div>
<div class="main"><p>葡萄藤轻游戏专注于桌游领域,提供在线杀人游戏,捉鬼,炸狼堡等多种聚会游戏,以下线下聚会桌游道具。</p></div>
<div class="logo_l"><img src="05.png"><p>22</p></div>
<div class="logo_r"><img src="06.png"><p>SZPTTeng</p></div>
</body>
</html>
[散修弟子] CSS-6511
上海分院|内门弟子] JS-郭巍
可以使用text-align: center,来使文字居中,text-align属性规定元素内的文字排列方式,center带表了居中排列。