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

最新推荐文章于 2021-10-11 22:19:21 发布

weixin_33946605

最新推荐文章于 2021-10-11 22:19:21 发布

阅读量191

点赞数

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

版权

详细描述

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

weixin_33946605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不明白怎样才能不管一个字还是十几个字都能让文字处于绝对居中

详细描述p标签中设置了块元素，但是如果内容有2个em，但块元素是有5个em长，实际效果是从左到右显示开来，但并不是绝对的垂直居中。如果不定义块元素，用margin:0 auto;来定义p标签好像也没办法。截图代码*{margin: 0;padding: 0;}html{height: 100%;}body{ col...
复制链接

扫一扫

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

“相关推荐”对你有帮助么？