加载中…
个人资料
Blan丶Sun
Blan丶Sun
  • 博客等级:
  • 博客积分:0
  • 博客访问:210,155
  • 关注人气:11
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

css设置多行垂直居中

(2016-02-18 14:44:37)
标签:

css

文字垂直居中

table

display

分类: Web前端
如果让元素垂直居中,一般会使用vertical-align:middle属性,但是对于文字而言,这种方式无效,仅有在table中有效,但是我们可以讲div元素显示为table展示,这涉及两个display属性:
table 此元素会作为块级表格来显示(类似 table标签),表格前后带有换行符。
table-cell 此元素会作为一个表格单元格显示(类似 td 和 th标签)

我们需要将文字的容器标签显示为table-cell,而外层标签显示为table,这样就可以使用vertical-align:middle属性。
html代码:

<div class="img_1  pt-page-moveFromLeft">
                <h4 class="page-title"> 不是为了吃,谁想回家过年呢?年夜饭你吃得最多的是什么?</h4>
                <ul class="page-ul" id="xx_3">
                    <li id="xx_3_1" onclick="xx_3(this)"><p>A 传统菜系:香肠腊肉、甜/咸烧白、红烧鱼、东坡肘子…</p></li>
                    <li id="xx_3_2" onclick="xx_3(this)"><p>B 西式大餐:红酒牛排、蔬菜沙拉、法式面包…</p></li>
                    <li id="xx_3_3" onclick="xx_3(this)"><p>C 素食主义:肉是什么?没听说过!</p></li>
                    <li id="xx_3_4" onclick="xx_3(this)"><p>D 零食小当家:滴米未沾,我的世界只有薯片、巧克力和汽水!</p></li>
                    <input type="hidden" id="a1" name="a1" value="0"/>
                </ul>
            </div>
<div class="img_1  pt-page-moveFromLeft">
                <h4 class="page-title">吃完年夜饭,你的“运动”方式是哪种?</h4>
                <ul class="page-ul" id="xx_4">
                    <li><p>A 打麻将、斗地主,输的只剩下内裤</p></li>
                    <li><p>B 发红包发到手软,手指得到极大满足</p></li>
                    <li><p>C 陪熊孩子折腾,几年内不想生娃</p></li>
                    <li><p>D 看春晚放鞭炮,欢欢喜喜过新年</p></li>
                    <input type="hidden" id="xx_41" name="xx_41" value=""/>
                </ul>
            </div>
如上代码所示,在li标签内部嵌套一个p标签,将其设置为display:table-cell样式,同时将li标签设置为display:table,这样就可以实现文字垂直居中。

css样式:

.page-ul li{
color: #232121;
font-size:0.9rem;
text-align: left;
padding: 5px;
margin: 0.5em 0;

 -moz-border-radius: 15px;      
 -webkit-border-radius: 15px;   
 background: #fff;

 display:table;
 overflow:hidden;
 height: 30px;
}
.page-ul li {
display:table-cell;
vertical-align:middle;
}
效果如图所示:
css设置多行垂直居中

css设置多行垂直居中




0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有