码迷,mamicode.com
首页 > Web开发 > 详细

css设置文字上下居中,一行文字居中,两行或多行文字同样居中,附带效果图

时间:2018-06-04 14:24:33      阅读:977      评论:0      收藏:0      [点我收藏+]

标签:display   text   单行   img   图片   htm   style   TE   效果图   

附图:

技术分享图片

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 定位来实现

 

4. 利用 vertical-align 来实现

css设置文字上下居中,一行文字居中,两行或多行文字同样居中,附带效果图

标签:display   text   单行   img   图片   htm   style   TE   效果图   

原文地址:https://www.cnblogs.com/gaoht/p/9132612.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!