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

最新推荐文章于 2022-02-24 20:24:02 发布

weixin_33946605

最新推荐文章于 2022-02-24 20:24:02 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017947463

本文探讨了在CSS中实现文本垂直居中的方法，包括使用text-align:center属性，并提供了代码示例，帮助读者理解如何在不同情况下使文本在块元素中居中显示。

详细描述

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>