前端 - 如何實現自適應的多行文字垂直居中?
問題描述
demo在這https://jsfiddle.net/f2m02kz2/文字外圍的背景必須是正方形,使用table-cell的話就變成長方形?文字在不同屏幕下變化,而且要在不同的屏幕下居中?不知該如何實現?
問題解答
回答1:1.使用css3的box、flex布局2.使用table-cell,
<p class='search_box'> <a href='http://www.cgvv.com.cn/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. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實現存在即更新應該使用哪個標簽?2. mysql - 數據庫建字段,默認值空和empty string有什么區別 1103. mysql - 這種分級一對多,且分級不平衡的模型該怎么設計表?4. Navicat for mysql 中以json格式儲存的數據存在大量反斜杠,如何去除?5. mac OSX10.12.4 (16E195)下Mysql 5.7.18找不到配置文件my.cnf6. mysql mysql_real_escape_string() 轉義問題7. 新人求教MySQL關于判斷后拼接條件進行查詢的sql語句8. mysql - 千萬數據 分頁,當偏移量 原來越大時,怎么優化速度9. MySQL FOREIGN KEY 約束報錯10. mysql - 數據庫表中,兩個表互為外鍵參考如何解決
