首页 > 编程札记 > 编程

CSS布局——单行文字和多行段落的垂直居中

阅读：评论：0

水平居中当然是`text-align: center;`（无宽时使用）啦，当然你也可以像我下面一样，通过padding、margin（块级元素的居中）来使内容相对父元素居中，不过`text-align: center;`更省事。

👇👇👇传送门：

①前端开发各种居中归纳

②深入理解盒子——模型文本垂直居中的N种方法单行/多行文字(未知高度/固定高度)

一行字时：（一般用于制作标题名）

第一种：padding（填充）+line-height（行高=文字大小）

这里给设定最后盒子的span.font-test元素的宽是200px，高是100px；
通过上图可知，文字内容水平已经居中了，但是垂直上还没居中。
按道理，元素上的高=100-40×2=20px；是对的，那究竟漏了哪里呢？
👉👉👉字体除了大小，还存在着行高（默认的行高比字体size小）！！！！

🔹关于行高line-height知识的传送门： 🔹
        ①深入理解css之line-height；
        ②CSS line-height概念与举例；
        ③css行高（line-height）及文本垂直居中原理；
        ④为什么设置line－height 与height相等就可以垂直居中呢？
配合padding，设置为行高等于字体大小，即 line-hight=font-size=20px;或 line-hight=100%;单行文字就可以水平和垂直居中了。

代码部分：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒子模型——字体</title> 
<style type="text/css">
body,p{padding: 0px;margin: 0px;
}
.box{background-color: #FFB6C1;width: 800px;height: 300px;
}/*200×100*/
.font-test{display: block;background-color: #ADD8E6;width: 80px;height: 20px;font-size: 20px;/*单行内容时，注意设置行高等于字体大小*/line-height: 100%;              /*或者 line-height: 20px;*//* padding-right=padding-left=[200-(20×4)]/2=60px *//* padding-top=padding-bottom=(100-20)/2=40px */padding:40px 60px;
}
</style>
</head> 
<body><div class="box"><span class="font-test">字体内容</span></div>
</body>
</html>

第二种：直接line-height

（将行高设置成A元素的高，A是作为参考居中的box，可以是该子元素，或者是它的父元素，参考垂直居中不一样而已）

在该元素中垂直

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒子模型——单行字垂直居中</title> 
<style type="text/css">
body,p{padding: 0px;margin: 0px;
}
.box{background-color: #FFB6C1;width: 800px;height: 300px;
}/*200p×100*/
.font-test{display: block;background-color: #ADD8E6;width: 200px;height: 100px;				/*<<<<<=====*//*此处行高等于该子元素的高*/line-height: 100px;}
</style>
</head> 
<body><div class="box"><span class="font-test">字体内容</span></div>
</body>
</html>

在父元素中垂直

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒子模型——单行字垂直居中</title> 
<style type="text/css">
body,p{padding: 0px;margin: 0px;
}
.box{background-color: #FFB6C1;width: 800px;height: 300px;				/*<<<<<=====*/
}/*200p×100*/
.font-test{display: block;background-color: #ADD8E6;width: 200px;height: 100px;/*此处行高等于父元素的高*/line-height: 300px;}
</style>
</head> 
<body><div class="box"><span class="font-test">字体内容</span></div>
</body>
</html>

第三种：父元素和子元素变为表格属性（缺点：兼容性差，IE6、7不兼容，破坏原有的块状元素的性质，一般很少用这种方法）

父元素和子元素都加display: table-cell;变成表格单元格属性，且子元素中加入vertical-align:middle;
（相当于表格单元格中嵌表格单元格，当然，你也可以将父元素变为块级表格元素，在下面有写）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒子模型——单行字垂直居中</title> 
<style type="text/css">
body,p{padding: 0px;margin: 0px;
}
.box{background-color: #FFB6C1;width: 800px;height: 300px;display: table-cell;
}/*200p×100*/
.font-test{display: block;background-color: #ADD8E6;width: 200px;height: 100px;display: table-cell;vertical-align:middle;
}
</style>
</head> 
<body><div class="box"><span class="font-test">字体内容</span></div>
</body>
</html>

父元素设置display: table;变为块级表格元素，而子元素设置display: table-cell;为表格单元格属性，且加入vertical-align:middle;

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒子模型——单行字垂直居中</title> 
<style type="text/css">
body,p{padding: 0px;margin: 0px;
}
.box{background-color: #FFB6C1;width: 800px;height: 300px;display: table;
}/*200p×100*/
.font-test{display: block;background-color: #ADD8E6;width: 200px;height: 100px;display: table-cell;vertical-align:middle;
}
</style>
</head> 
<body><div class="box"><span class="font-test">字体内容</span></div>
</body>
</html>

👇👇👇下面是父元素设置为display: table和display: table-cell的区别和作用的对比（用哪种看你想要什么效果了）

多行段落时：（文本内容）

第一种：通过N次测试与调整数值来达到伪垂直居中（太麻烦了，此处不上码）

感想：

①上面的步骤，本来是想用单行文本那种 padding + line-height方法来写的，但是无奈发现行不通；

②段落时，行高不等于字体或者父元素高，不能乱设置，所以得既不能太密，又不能太疏；

③经过无数次：设置字体大小（默认大小就是16px）→设置行高→设置padding（top/bottom）才达到这种效果；

④奉劝各位了解下就好，因为开发中不能随便改变字体大小和行高以及间距；

⑤除非是不用还原psd稿件，自己喜欢怎么布局就怎么布局的网站，就可以用；

⑤除非是找不到其他办法，一般这种麻烦的估计没人用吧。

👉👉👉相关传送门： CSS关于盒子模型还原的问题，不管我尺寸再怎么的精确，都会因为字体之间的间距不能和原图形重叠。

第二种：变为表格属性（上面说了，兼容性差，不是很推荐）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>多行段落垂直居中</title>
<style type="text/css">body,p{padding: 0px;margin: 0px;}/*800×500*/.box{background-color: #FFB6C1;width: 800px;height: 500px;display: table-cell;}/*600×300*/.paragraph{border: 1px solid #000000;background-color: #ADD8E6;width: 598px;height: 298px;color: #ffffff;display: table-cell;vertical-align:middle;}
</style>
</head><body><div class="box"><p class="paragraph">东湖岩壁千姿百态，无奇不有。真可谓怪石嶙峋，形状万千。山岩累累，危峰兀立。抬眼上望，山峰像是用绿色染过似的，处处苍翠欲滴。还有气势壮丽的峻峭石壁，像是那样的高，那样的陡，昂首仰视，真使人感慨万千。</p></div>
</body>
</html>

第三种：插入<table>标签，利用td标签的默认属性`vertical-align: middle;`来垂直居中

注意：vertical-align: middle;只对行内元素有效。<td>默认自带，所以不用设置。（这样会多很多无意义的标签）
（看到这估计很多人跟我一样想：既然如此，将块级元素行内化，再加入vertical-align: middle;不就行了？嗯，很好，欢迎入坑，下面我会接着说明）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>多行段落垂直居中</title>
<style type="text/css">body,p{padding: 0px;margin: 0px;}/*800×500*/.box{background-color: #FFB6C1;width: 800px;height: 500px;}/*600×300*/.paragraph{border: 1px solid #000000;background-color: #ADD8E6;width: 598px;height: 298px;color: #ffffff;}
</style>
</head><body>
<div class="box">
<table><tbody><tr><td class="paragraph"><p>东湖岩壁千姿百态，无奇不有。真可谓怪石嶙峋，形状万千。山岩累累，危峰兀立。抬眼上望，山峰像是用绿色染过似的，处处苍翠欲滴。还有气势壮丽的峻峭石壁，像是那样的高，那样的陡，昂首仰视，真使人感慨万千。</p>
</td></tr></tbody></table>
</div>
</body>
</html>

⚠⚠⚠ 坑 🕳 坑 ⚠⚠⚠

关于`vertical-align: middle;`带来的坑

看到上面，发现原来 vertical-align: middle;这么好用，且只对行内元素有效，那么岂不是直接给行内元素的css样式添加或者将块级元素行内化就好了？然后内容就能垂直居中了？

实际上：无效，且...

而真正的用法是：

^上上标^标，显示在同级左上方或右上方。
_下下标_标，显示在同级左下方或右下方。
中中标标，当然，没有中标，这里只是用small标签取巧，来说这种效果。
而middle，所体现的，就是“中标”的效果，必须旁边有参照，在参照物旁边，起到垂直居中效果，但是对于整个段落来说，并不是居中（所以，你的参照标签，height就必须等于容器高）。

👇👇👇（下面是码子，可以自行感受这个坑所带来的“魅力”）：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>多行段落垂直居中</title>
<style type="text/css">body,p{padding: 0px;margin: 0px;}/*800×500*/.box{background-color: #FFB6C1;width: 800px;height: 500px;}/*600×300*/.paragraph{border: 1px solid #000000;background-color: #ADD8E6;width: 598px;/*height: auto;   这里可以不写*/color: #ffffff;display: inline-block; /*因为是要对准旁边元素居中，又必须有宽高，所以只能行内块元素（共享一行）*/vertical-align: middle;}.help{width: 0;		/*因为不需要内容，所以宽值为0*/height: 100%;	/*因为起到参考效果，所以高值必须要，因为是对准这个高的中间位置垂直居中的，所以必须等于父元素。*/display: inline-block;/*因为是要给旁边元素对准居中，又必须有宽高，所以只能行内块元素（共享一行）*/vertical-align: middle;}
</style>
</head><body><div class="box"><p class="paragraph">东湖岩壁千姿百态，无奇不有。真可谓怪石嶙峋，形状万千。山岩累累，危峰兀立。抬眼上望，山峰像是用绿色染过似的，处处苍翠欲滴。还有气势壮丽的峻峭石壁，像是那样的高，那样的陡，昂首仰视，真使人感慨万千。</p><div class="help"></div></div>
</body>
</html>

一些相关知识和笔记的传送门：

①关于css中display:table注意点

②display:table很好用，而且能实现垂直自适应的效果，兼容性强于flex，怎么使用率这么低呢？

③css 为什么给span加vertical-align: middle不起作用？

④vertical-align:middle的简单探讨

⑤vertical-align以及利用 vertical-align 实现垂直居中

⑥CSS中使用vertical-align:middle使元素垂直居中的坑

⑦vertical-align 无效？

本文发布于:2024-02-01 07:17:38，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170674306034829.html

上一篇：增删改查

下一篇：东软android面试题,东软集团面试题目

标签：段落布局文字 CSS

留言与评论（共有 0 条评论）

CSS布局——单行文字和多行段落的垂直居中