前端 - 如何实现自适应的多行文字垂直居中?
问题描述
demo在这https://jsfiddle.net/f2m02kz2/文字外围的背景必须是正方形,使用table-cell的话就变成长方形?文字在不同屏幕下变化,而且要在不同的屏幕下居中?不知该如何实现?
问题解答
回答1:1.使用css3的box、flex布局2.使用table-cell,
<p class='search_box'> <a href='https://www.haobala.com/wenda/6004.html' > <p class='pp'>搜索<br />问题</p> </a></p>
.search_box{ width:100%; display:table; height: 200px;}.search_box>a{ display:table-cell; background: red; height:0; text-align:center; font-size:1.5rem; text-decoration: none; vertical-align: middle;}.pp { vertical-align: middle; padding: 0; margin: 0 auto; background: blue; width: 25%; color: #fff;}回答2:
建议使用多个p标签来代替,多行文字的垂直居中可以试试vertical
回答3:可以看一下flex
相关文章:
1. node.js - 用node安装express出错2. Nginx如何进行跨域配置,才能使用DELETE,PUT请求方法3. node.js - Hexo next主题 languages/zh-Hans.yml报错4. node.js - nodejs中cookie例子的一个疑问5. node.js - NPM安装包时有些情况会爆出一些的警告/报错信息怎么判断是否可以忽略?6. node.js - nodejs 正则匹配,cpu达到100%的问题7. node.js - 这个是不是node-sass的版本问题8. java - 微信退款,公账号向个人转账SSL验证失败9. node.js - nodejs提示"$ 不是内部或外部命令"10. HTML表单操作标签。调用父相对URL