CSS 不定行文本的垂直居中

最新推荐文章于 2025-05-22 11:23:59 发布
原创 最新推荐文章于 2025-05-22 11:23:59 发布 · 283 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css  垂直居中

博客给出了一个CSS实现元素垂直居中的解决方案。定义了类名为.name-list-detail的样式，设置其高度、边框和背景，同时对内部的p元素设置边框、高度等样式，通过flex布局实现垂直居中。

解决方案:

.name-list-detail{height:42px;border-bottom: 1px solid #E4E4E4;background: #fff;}
.name-list-detail p{border-right: 1px solid #E4E4E4;height:100%;line-height: 21px;display: flex;align-items: center;justify-content: space-around;flex-direction: column;}

糯米滋555
关注
CSS实现文字垂直居中
weixin_48596030的博客
04-01 4万+
CSS实现文字垂直居中
CSS 元素水平垂直居中大揭秘：已知宽高与不定宽高的全方位解析
向着太阳迎着光
12-03 661
方法优点缺点应用场景Flexbox简单、灵活，适应各种大小元素，支持响应式支持较差的浏览器（如IE 10以下）动态内容、响应式布局、多方向居中Grid强大的网格布局，支持复杂布局，简单实现居中较低的浏览器支持（IE 11及以下不支持）复杂布局、网格系统、多个方向的居中绝对定位+transform兼容性好，不依赖Flexbox或Grid相对定位父元素，需要清楚元素大小简单的单个元素居中，老旧浏览器传统行内块元素+对齐兼容性强，简单易用只适用于简单布局，灵活性差简单的文本或小块元素居中。
DIV+CSS让文字垂直居中
马骥的专栏
07-02 1778
也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的、、等，而像、这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用
不确定行数的多行文本垂直水平居中的css
weixin_34408624的博客
12-13 273
ul li { position:relative; display: table; width:3rem; height:3rem; background:url('image/defaultBg.jpg') 0 0/100% 100% no-repeat; float:le...
不定行数 div中文字垂直居中
青竹少年
09-12 346
.nameDivTiPar { display: table; height: 2.1rem; } .nameDivTi { width: 5rem; font-size: 0.32rem; color: #282828; word-wrap: break-word; display: table-cell; vertical-align: middle; } &lt...
纯css实现不固定行数的文本在一个容器内垂直居中
anmi7832的博客
04-21 198
项目中要实现的效果如图： html代码 及 css代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ...
垂直居中对齐的CSS示例代码
12-13
对于不定高元素的垂直居中，可以考虑使用其他方法，如Flexbox或Grid布局。 在Flexbox中，你可以这样实现垂直居中： ```css .outer { display: flex; justify-content: center; align-items: center; /* ......
CSS实现垂直居中的4种思路详解
09-24
1. **行高line-height实现单行文本垂直居中** 单行文本的垂直居中可以通过设置`line-height`来实现。无需设定元素高度，`line-height`值设置为一个固定值，文本就会在这个高度内垂直居中。例如： ```css .test { ...
【高频考点精讲】CSS居中布局大全：10种方法实现水平垂直居中，总有一种适合你
最新发布
全栈老李的博客
05-22 875
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。作为前端工程师，你一定遇到过这样的场景：产品经理指着设计稿说"这个弹窗要居中显示"，而你在Chrome调试器里疯狂尝试却死活不生效。别担心，今天全栈老李就带你彻底攻克这个前端界的"哥德巴赫猜想"——CSS居中布局。（文末有面试题彩蛋，记得看到最后哦~）
CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）
qq_35788269的博客
06-14 2万+
CSS3/CSS中居中解析今天，博主带来的是CSS3/CSS中的居中解析，相信小伙伴们有时候也会被各种居中搞的一脸懵逼把！居中总体来说可以分为水平居中还有垂直居中，顾名思义，定义这里就不解释了！首先，我们来看下垂直居中：（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&l...
css文本垂直居中
heguixian的博客
04-27 735
关键代码 .item-txt .fr::before{ content: ‘’; display: inline-block; vertical-align: middle; height: 100%; }
css 设置文本垂直居中
weixin_30339969的博客
12-21 515
css设置文本垂直居中 垂直居中的高必须等于元素的高才能居中 如下图： 代码演示： div{ height:60px; } p{ line-height:60px; /*垂直居中的高必须等于元素的高才能居中*/ } 转载于:https://www.cnblogs.com/luckybaby519/p/10157142.html...
【css】文字垂直居中
sayyy的专栏
08-31 294
前言 html在线运行https://www.runoob.com/runcode 方法1：容器高度不固定 将容器的padding-top和padding-bottom的值设置成相等的值。 <!DOCTYPE html> <html> <head> <style> div.test { border:1px solid #000000; padding-top: 30px; padding-bottom: 30px; } </style>
【CSS】让文字垂直居中的方法
shifff的博客
07-31 5853
推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简单易用，而且兼容性好，适用于各种场景。方法也可以在简单的单行文本垂直居中效果中使用。如果你更加灵活地调整，你可能需要结合多个方法。通过这些方法，你可以确保文本在容器中垂直居中，并且在不同的设备和分辨率下都能保持良好的显示效果。
CSS 设置垂直居中
热门推荐
卿本无忧的博客
09-29 3万+
CSS 设置垂直居中
固定行数文字垂直居中与不固定行数文字垂直居中
qq_43379179的博客
05-24 453
固定行数文字垂直居中与不固定行数文字垂直居中 今天碰到一个固定固定行数文字垂直居中展示的问题，学到一个新的css属性-webkit-line-clamp。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -...
【css】transform使多行（不定行）文本居中
康一夏忙中偷闲的日子
03-28 516
transform使多行（不定行）文本居中 使用flex布局可以更快更方便居中： 【css】flexible.css - flex布局的兼容写法
css div垂直居中对齐_HTML中心文本–如何CSS垂直对齐Div
cumian8165的博客
08-20 1403
css div垂直居中对齐In the HTML and CSS world, it's all about the layout structure and the distribution of elements. We usually use HTML to define the markup and structure, while CSS helps us handle the styl...
CSS实现垂直居中的十五种方法
guanguan0_0的博客
10-17 9951
情景一：单行文字垂直居中 1、line-height 原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置 &lt;div class="text-con"&gt;单行文字垂直居中&lt;/div&gt; &lt;style&gt; .text-con { width: 200px; height:60px; line-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值