前端 - 如何實現(xiàn)自適應的多行文字垂直居中?
問題描述
demo在這https://jsfiddle.net/f2m02kz2/文字外圍的背景必須是正方形,使用table-cell的話就變成長方形?文字在不同屏幕下變化,而且要在不同的屏幕下居中?不知該如何實現(xiàn)?
問題解答
回答1:1.使用css3的box、flex布局2.使用table-cell,
<p class='search_box'> <a href='http://www.aoyou183.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. 我的html頁面一提交,網(wǎng)頁便顯示出了我的php代碼,求問是什么原因?2. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?3. 數(shù)據(jù)庫 - 使用讀寫分離后, MySQL主從復制延遲會導致讀不到數(shù)據(jù)嗎?4. tp6表單令牌5. docker 17.03 怎么配置 registry mirror ?6. 老哥們求助啊7. django - 后臺返回的json數(shù)據(jù)經(jīng)過Base64加密,獲取時用python如何解密~!8. node.js - node 客戶端socket一直報錯Error: read ECONNRESET,用php的socket沒問題哈。。9. 如何解決docker宿主機無法訪問容器中的服務?10. javascript - canvas 可以實現(xiàn) PS 魔法橡皮擦的功能嗎?
