纯CSS实现多行文字垂直居中几种方法解析
2023-09-11 14:19:55 时间
场景:父元素 高度固定,如何使其中的文字垂直居中?
1、table布局:
利用display:table+display:table-cell的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.middle-box{
display: table; /*重点*/
height: 300px;border: 1px solid #000;
}
/*重点:table-cell布局*/
.middle-inner{
display: table-cell;
vertical-align:middle;
text-align:center;
}
</style>
<body>
<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style=""><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.middle-box{
display: table; /*重点*/
height: 300px;border: 1px solid #000;
}
/*重点:table-cell布局*/
.middle-inner{
display: table-cell;
vertical-align:middle;
text-align:center;
height: 200px;
border:1px solid #000;
}
</style>
<body>
<div class="">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style=""><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>
</body>
</html>
效果:
利用display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css居中对齐</title>
<style>
*{padding: 0;margin:0;font-size: 12px;}
div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;}
</style>
<div>
<span>测试文字测试文字</span>
</div>
<div>
测试文字测试文字
</div>
<div>
<p>测试文字测试文字</p>
<p>测试文字测试文字</p>
</div>
</body>
</html>
效果:
优点:等高布局,无需设置高度,文字轻松实现垂直居中
缺点:ie7以下不兼容!
2、利用line-height和vertical-align:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css居中对齐</title>
<style>
*{padding: 0;margin:0;font-size: 12px;}
div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #000; line-height: 200px;}
span{display: inline-block;vertical-align: middle;line-height: 22px;}
</style>
<div>
<span>测试文字测试文字</span>
</div>
<div>
<span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>
</div>
</body>
</html>
效果:
关键样式:
① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线
② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height,所以这里要设置inline-block。
重新审视一下 CSS vertical-align 属性 的定义:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值,这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
有以下几点需要注意:
① vertical-align属性应该设置到 行内元素上(行内块元素也可)
② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。
③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。
相关文章
- CSS创建三角形(小三角)的几种方法
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- 【CSS进阶】原生JS getComputedStyle等方法解析
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- Linux系统中同时执行多个脚本运行方法(&&、||、;、&)
- Windows下删除.svn文件夹的最简易方法
- CSS样式穿透的几种方法
- jquery加载页面的几种方法(页面加载完成就执行)
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- python 文件操作常用方法
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- web服务器获取请求客户端真实地址的方法
- CentOS安装jdk的三种方法
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- 【转发】JQuery中操作Css样式的方法
- apache+php完美解决301重定向的两种方法
- Java常用方法:StringUtils.isNotBlank()、StringUtils.isEmpty()、去除空格的函数、手机号中间4位换成*、判断字符是否为数字
- js原生获取某元素的属性的兼容性方法
- Git 使用教程 之 Git常见错误及解决方法整理
- pip: failed to create process.解决方法
- CSS实现9宫格布局的4种方法:flex、float、grid、table布局
- Vue使用第三方库实现动画效果:animate.css使用方法和教程案例
- 原生js源码之Array数组filter方法
- CSS 加粗(css font-weight)
- CAD中如何布置井?CAD中布置井的方法技巧