css实现行内文字垂直居中
2018-06-24 02:01:31来源:未知 阅读 ()
之前本人一直使用浮动、相对定位、绝对定位和display:table等css的方法进行定位。网上得知flex可实现弹性布局,符合未来发展趋势,随尝试。
1:让盒子行内文字垂直居中,解决思路是讲文字的行高设置为盒子的高度。
p { border:#333333 solid 1px; height:50px; line-height:50px; margin-bottom:30px; }
2:让盒子行内文字垂直居中,解决思路是对盒子的高度设定,然后对盒子的padding-top和padding-bottom设置相同的值。
p { border:#333333 solid 1px; padding-top:30px; padding-bottom:30px; margin-bottom:30px; }
3:让盒子行内文字垂直居中,解决思路是让盒子的display属性变成table,然后文字添加span标签,span属性display:table-cell
p { border:#333333 solid 1px; height:60px; display:table; width:100%; margin-bottom:30px; } p span { display:table-cell; vertical-align:middle; }
<p><span>中华人民共和国</span></p>
4:让盒子行内文字垂直居中,解决思路是让盒子display的属性变成flex
p { border:#333333 solid 1px; height:60px; display:flex; align-items:center; margin-bottom:30px; }
<p><span>中华人民共和国</span></p>
如果让“中华人民共和国”水平也居中的话,css调整为:
p { border:#333333 solid 1px; height:60px; display:flex; align-items:center;/*垂直方向*/ justify-content:center;/*水平方向*/ margin-bottom:30px; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端开发初学者
下一篇:css 超出规定行数自动隐藏
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash