CSS实现多行文本垂直居中

最新推荐文章于 2024-09-02 08:00:00 发布
最新推荐文章于 2024-09-02 08:00:00 发布
阅读量664 收藏 4
点赞数 3
分类专栏： HTML&CSS 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43599321/article/details/129271253
版权

如下图所示，当有多行文本时，如何实现多行文本在容器中垂直居中呢？
在这里插入图片描述
如果是单行文本，将line-height 设置为容器高度即可实现垂直居中，如下图，显然多行文本时，line-height 无法实现垂直居中。
在这里插入图片描述
可采用以下方法实现：

  1. 将容器的display设置为table.
  2. 将容器内的文本的display设置成table-cell（表格单元格属性）.
  3. 将容器内的文本的vertical-align设置成middle.

在这里插入图片描述

搜捕鸟了
关注
专栏目录
CSS之小技巧（多行文字垂直居中）
m0_46166985的博客
10-13 806
单行文字垂直居中只需要 line-height 等于 height 即可 <template> <div> <ul> <li class="cli"> <span class="cspan">小螃蟹小螃蟹</span> </li> <li class="cli"> <span class="cspan">小螃蟹小螃蟹&l
css:实现多行文本居中的五种方法
YangLu888
10-09 4882
css实现多行文本居中的五种方法
CSS多行文字垂直居中的两种方法
weixin_34365417的博客
03-19 270
之前写过一篇关于：CSS左右居中对齐的文章，里面提到的两种方法其实也可以引申为垂直居中对齐。写这篇文章是因为要兼容IE6、IE7的问题，我们都知道一行文字时可以通过line-height来设置垂直居中，如果是多行这个肯定不行，而我的同事因为这个用了js来实现居中对齐，我觉得这是很难理解的。故而整理这篇文章。 HTML代码： &lt;div class="middle-box"&gt; ...
CSS 水平垂直居中的7种方法 - 附示例
最新发布
m0_48968874的博客
09-02 882
【代码】CSS 水平垂直居中的七种方法 - 附示例。
css多行文字垂直居中
有问题可关注公众号：前端研究院 后台输入问题回复
06-25 193
css多行文字垂直居中
CSS：实现多行文本垂直居中的四种方法
热门推荐
KongKong_Rac的博客
10-15 1万+
对于单行文本，可以使用行高等于高度来设置垂直居中，但多行文本不适用。 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现 将父元素设置为块级表格来显示，再将子元素设置为一个表格单元格显示后，设置vertical-align: middle;即实现效果。 <body> <div class="text"> <span>扩展： Vue.js 是一套构建用户界面的渐进式框架。 它与其他重量级框架不同的是，Vue
CSS设置多行文本垂直居中的方法
12-13
本文将详细探讨如何使用CSS实现多行文本垂直居中，并解决在特定情况下遇到的问题。 首先，对于单行文本的垂直居中，可以简单地通过设置`line-height`与`height`相等来实现。例如： ```css .single-line-center { ...
css多行文本垂直居中
09-27
css 多行文本垂直居中显示，兼容各大浏览器！
CSS 实现多行文本垂直居中
JackAfan
09-08 211
居中 有时候有些文字需要行居中显示，行我们知道使用: <div> JackAfan <br> JackAfan </div> div{ width:100px; height:100px; background:pink; text-align: center; } 垂直居中 <div id="con"> <div> JackAfan <br>
CSS多行文本垂直居中
weixin_33758863的博客
08-11 108
今天需要将文本垂直居中，就是一行是垂直居中，多行也是垂直居中。 效果如下 实现代码（同事提供） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;sty
css 多行文字垂直居中
qq_34815528的博客
12-14 1013
display: flex; flex-direction: column; justify-content: space-around;
css实现多行文字垂直居中
charlie________的博客
11-29 508
flex方法 <div class="father"> <div class="children"> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span>
CSS多行文本垂直居中的方法
互联网－从零开始
12-07 1557
单行文本居中比较简单，就是将line-height设置成和height一样就可以了，但是对于多行文本，这种方式就行不通了，除了第一行，下面的就都看不到了。 多行文本垂直居中的CSS需要这么设置： /*多行居中对齐的方法，width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性，且div不能浮动*/
CSS实现多行文字垂直居中
kongjunchao159的博客
10-19 680
多行文字垂直居中显示： HTML xxxxxxxxxxxxxxx CSS div{ display:table-cell; width:200px; height:100px; border:1px solid red; vertical-align:middle; } div span{ display:inline-block; vertical-align:
纯CSS实现多行文字垂直居中几种方法解析
猫儿不哭
12-10 320
原文链接 ：https://www.cnblogs.com/goloving/p/7657544.html 场景：父元素 高度固定，如何使其中的文字垂直居中？ 1、table布局： 　　利用display:table+display:table-cell的方法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt...
CSS多行文本水平垂直居中
sinat_39303863的博客
03-29 266
CSS多行文本水平垂直居中 实现多行文本水平垂直居中： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 500px; height: 500px; background-color: #5F9EA0; } .box span{
css设置多行文本始终保持垂直居中
程序员
04-11 409
在做网站时经常会需要做列表排版，然后让垂直居中，如果是文字相同还好，如果是文字不确定是几行，但是要始终保持垂直居中，该怎么办呢？其实很简单只需要，给父元素设置固定高度 height：px 和display: table; 子元素设置 display: table-cell; vertical-align: middle; 就可以啦。下方案例 css设置多行文本始终保持垂直居中html代码 <div class="anli"> <p> css设置多行...
文字水平集中css,CSS多行文字水平垂直居中的几种方式
weixin_31156651的博客
08-04 1215
单行文本的水平垂直居中常通过设置line-height实现, 而当我们需要使多行文字水平垂直居中时, 直接设置line-height不能够实现我们所需的效果.下面通过四种不同思路实现多行文字的水平垂直居中. 这里主要介绍思路, 兼容性没有详细测过, 对于不同浏览器可能需要微调(我是在chrome 51下面跑的).HTML如下:123456MY TESTMY TEST使用inline-block, ...
CSS实现div垂直居中：单行/多行文本解决方案
当div内有多行文本且高度未知时，可以使用`display: flex`或者`display: table-cell`来实现垂直居中。 - 使用Flexbox: ```css div { display: flex; align-items: center; /* 这将使子元素在交叉轴（垂直方向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值