不确定行数的多行文本垂直水平居中的css
2018-06-24 02:05:08来源:未知 阅读 ()
ul li { position:relative; display: table; width:3rem; height:3rem; background:url('image/defaultBg.jpg') 0 0/100% 100% no-repeat; float:left; margin-bottom:0.2rem; text-align:center; box-shadow: 0 0 0.2rem #888; transition: all 0.3s linear; transform-origin: 0 0; transform-style: preserve-3d; color:#b21e23; font-weight:bold;font-size: 18px; border:1px solid #b21e23; overflow: hidden; } li .selects_item{ position:absolute; top:50%; left:50%; display:table-cell; vertical-align:middle; height:1.3rem; } lit .selects_item p{ position:relative; top:-50%; left:-50%; width:3rem; margin:0 auto; }
<div> <ul> <li> <div class="selects_item"> <p>我是多行文本</p> <p>我不确定行数,单行或多行</p> </div> </li> </ul> </div>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端程序员容易忽视的一些基础知识
下一篇:localStorage使用总结
- 行内和块状元素水平居中与单行或多行文本垂直居中及隐性改 2020-03-07
- css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略 2019-10-08
- 超过固定宽度或行数显示“...” 2019-08-14
- 单行截断和多行截断问题 2019-04-18
- 多行文本超出后隐藏,超出3行隐藏 2019-03-06
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