微学网

热门关键词:   as  thinkphp  ecshop  商务通  xxx  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

css 一行文字与多行文字垂直居中

发布时间:2020-10-23 来源:未知 点击:

附图:


1. 利用Flex布局实现

demo.html


	
1 <div class="demo demo-flex"><span>孤云将野鹤,岂向人间住。莫买沃洲山,时人已知处。</span></div>

style.css


	
1 .demo { 2 width: 120px; 3 height: 200px; 4 border: 1px solid red; 5 /*line-height: 25px;*/ 6 font-size: 12px; 7 } 8 .demo-flex{ 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 flex-direction: column; 13 }

2. 利用属性 line-height

<div id="box">   <span>文本上下居中</span> </div>

style.css


	
1 #box { 2 width: 200px; 3 height: 120px; 4 border: 1px solid red; 5 text-align: center; 6 } 7 #box span { 8 line-height: 120px; 9 }

注意: 这个方法只适用于 单行文本

3. 利用position 定位来实现

 html


	
1 <div class="box"> 2 <a class="remind">春宵一刻值千金,花有清香月有阴。歌管楼台声细细,秋千院落夜沉沉。</a> 4 </div>

css


	
1 .box{ 2 width: 500px; 3 4 height: 500px; 5 6 border: 1px solid red; 7 8 text-align: center; 9 } 10 11 定位方法 (一) 12 13 .remind { 14 position: absolute; 15 top: 50%; 16 left: 50%; 17 transform: translate(-50%, -50%); 18 } 19 20 定位方法 (二) 21 22 .remind { 23 position: absolute; 24 top: 0; 25 left: 0; 26 right: 0; 27 bottom: 0; 28 margin: auto 0; 29 height: 0; 30 }
 
 

4. 利用 vertical-align 来实现

即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。


	
1 <div id="box"> 2 <span>两个黄鹂鸣翠柳</span> 3 </div>

css


	
1 #box { 2 width: 200px; 3 height: 120px; 4 border: 1px solid red; 5 text-align: center; 6 7 } 8 #box::before {    //   伪元素 9 content: " "; 10 display: inline-block; 11 height: 100%; 12 width: 1%; 13 vertical-align: middle; 14 } 15 #box span { 16 vertical-align: middle; 17 }

 

5. 利用 Flex布局 来实现


	
1 <div id="box"> 2 <span>两个黄鹂鸣翠柳</span> 3 </div>

css


	
1 #box { 2 width: 200px; 3 height: 120px; 4 border: 1px solid red; 5 /*text-align: center;*/ 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 }


这就是微学网-程序员之家为你提供的"css 一行文字与多行文字垂直居中"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14058.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟教程,提供各类程序编程入门,技巧