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

最新推荐文章于 2022-09-29 15:22:58 发布
最新推荐文章于 2022-09-29 15:22:58 发布
阅读量697 收藏
点赞数
分类专栏： html+css入门学习过程 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/103796264
版权

水平居中当然是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 无效？
iuukai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
12-13
学习过程中经常遇到要居中的问题，水平居中问题比较好解决，而垂直居中问题因为vertical-align经常失效，所以不容易实现，今天将自己总结的一些方法归纳于这边。 1.div中单行文字垂直水平居中。条件：外层div高度已经给定。代码如下： 复制代码代码如下: <style type=”text/css”> .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; width:300px; overflow:hidden; } </style> <div class=”div3″> 2
css 单行/多行文字垂直居中问题
weixin_30521161的博客
10-14 97
例子可以直接看这里 http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释 http://blog.csdn.net/hdchangchang/article/details/47086565 这一篇提出了一个新想法 http://caibaojian.com/css-vertical-...
css实现单行文字、多行文字都垂直居中
weixin_39855431的博客
05-06 1341
有很多种方法可以实现这里我用两种方法来实现，一个是vertical-align，另一个是align-items具体实现如下：&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;标题&lt;/title&gt; &lt;meta name="ke
单行多行中垂直居中
不懂love的博客
10-25 288
父标签中使用：display:table;需要垂直居中的标签中使用：display:table-cell;vertical-align:middle;
CSS line-height行高上下居中垂直居中样式属性
12-08
在网页设计中，`line-height` 是一个非常重要的CSS样式属性，用于控制元素内部文本行之间的垂直间距，它可以帮助实现文字和图片的上下居中，以及单行或多行文本的垂直布局。`line-height` 的值可以是绝对长度单位...
同一行的图片和文字巧妙的居中对齐的解决方法
09-25
一旦应用了这些样式，不管span内是单行文字还是多行文字，图片都将与文字的垂直中线对齐，实现同一行的居中对齐效果。 需要注意的是，这种方法依赖于图片的高度与文字行的高度大致相同，这样才能达到最佳的居中对齐...
垂直居中.docx
12-20
对于单行文字，可以使用设置高度和行高相等的方法实现垂直居中。这种方法简单易行，但需要注意 overflow:hidden 的设置，以防止内容超出容器或产生自动换行。 代码示例： ``` div { height: 25px; line-height: ...
如何用CSS让文字居于div的底部
09-27
在网页设计中，有时我们需要将文字放置在div元素的底部，以便实现特定的布局效果，如对话框、脚注或版权信息的展示。在CSS中，虽然没有直接提供一个参数来实现文字靠底部对齐，但我们可以利用CSS的`position`属性...
单行，多行文本垂直居中
du的博客
11-07 679
<div class="table"> <div class="table_cell"> 一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之。 </div> </div> .table { di
css多行文本垂直居中
09-27
css 多行文本垂直居中显示，兼容各大浏览器！
通过CSS样式设置网页的最小宽度以将宽度固定为600px为例
12-09
通过CSS样式设置网页的最小宽度，下面的样式将网页的最小宽度固定为600px html代码，将所有的内容都放到id=container的容器内 复制代码代码如下: <body> <div id=”container”> CSS样式代码，指定最小宽度为600，兼容IE浏览器 复制代码代码如下: #container { min-width: 600px; width:[removed]document.body.clientWidth < 600? “600px”: “auto” ); }
单行或多行文本垂直居中
qq_32539519的博客
04-28 664
以前发现的问题没关注，现在终于重点弄了一下&lt;div&gt;&lt;p&gt;？？？&lt;/p&gt;&lt;/div&gt;假如知道div的高度，但是不知道p里面的内容是1行还是2行，想让p垂直居中的话可以js获取p的高度和div的高度，然后p标签margin-top的值就是（div的高度-p的高度）/2，这样就是一直垂直居中的p标签...
单行文本+多行文本垂直水平居中的设置方法
qq_43692768的博客
11-02 4055
一、单行文本居中方式   效果图如下：   HTML代码 <div id="container"> <div id="text">垂直水平居中的文本</div> </div>   css样式 #container { width: 600px; height: 300px; border: 1px solid black; } #text{ text-align: center; line-height: 3
css怎么让一个段落居中,css让一个div绝对居中
weixin_30240263的博客
08-04 406
css让一个div绝对居中方法1/* css */html,body{height: 100%;}body{margin: 0;background-color: bisque;position: relative;}div{background-color: aqua;width: 80px;height: 200px;position: absolute;left: 50%;top: 50%;...
CSS实现任意的单行(多行)垂直居中
weixin_33717117的博客
12-07 272
版权归作者所有，任何形式转载请联系作者。作者：U_U（来自豆瓣）来源：https://www.douban.com/note/495805313/ 以下就是我学习之后对其的改进, 通过absolute和margin来实现任意的单行(多行)垂直居中 这种方式实现的垂直居中灵活在哪里? 不需要知道待垂直居中的容器高度(意味着不需要写死任何高度数值) 支持多行垂直居中 可做为工具样式来使用, 例如...
Css 中单行及多行文字如何实现水平垂直居中？
qq_32506555的博客
08-29 8451
本文和大家分享的主要是css中单行及多行文字水平垂直居中相关内容，一起来看看吧，希望对大家学习css有所帮助。 　　一、单行文字 　　1. line-height、text-align（兼容性ie6/7） 　　CSS代码（为了节省空间，建议不要单行书写css样式） 　　.new{ 　　height:5em;  line-height:5em;  text-align:
一行、多行文本垂直居中的CSS实例说明
liangrockman的专栏
07-12 958
本文摘自52CSS.COM    在表格布局时代，不需要过多的考虑垂直居中的问题，在单元格中，默认就是垂直居中的，一行文字是垂直居中，三行文字同样也会垂直居中。进行CSS网页布局，这样的形式改变了。文字默认是居于容器顶部。    如下所示：DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w
CSS 设置垂直居中
热门推荐
卿本无忧的博客
09-29 3万+
CSS 设置垂直居中
css多行文字垂直居中
最新发布
06-02
在 CSS 中实现多行文字的垂直居中可以使用 `line-height` 属性和 `display: flex` 等方法。 方法一：使用 line-height 可以将 `line-height` 属性的值设置为容器高度的值，这样每行文字的高度都会与容器高度相等，从而实现多行文字的垂直居中。具体实现方式如下： ```css .container { height: 200px; /* 容器高度 */ line-height: 200px; /* 行高等于容器高度 */ text-align: center; /* 水平居中 */ } ``` 方法二：使用 display: flex 可以使用 `display: flex` 属性将容器内的元素纵向排列，并将元素水平和垂直都居中，实现多行文字的垂直居中。具体实现方式如下： ```css .container { height: 200px; /* 容器高度 */ display: flex; /* 使用 flex 布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 以上两种方法都可以实现多行文字的垂直居中，具体使用哪种方法取决于具体的需求和情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值