不明白怎样才能不管一个字还是十几个字都能让文字处于绝对居中。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/85334603

详细描述

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带表了居中排列。

猜你喜欢

转载自blog.csdn.net/jnshu_it/article/details/85334603