文章詳情頁(yè)
前端 - 如何實(shí)現(xiàn)自適應(yīng)的多行文字垂直居中？
瀏覽：101日期：2024-06-11 16:26:22
問(wèn)題描述
demo在這https://jsfiddle.net/f2m02kz2/文字外圍的背景必須是正方形，使用table-cell的話就變成長(zhǎng)方形？文字在不同屏幕下變化，而且要在不同的屏幕下居中？不知該如何實(shí)現(xiàn)？
問(wè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 />問(wèn)題</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：
建議使用多個(gè)p標(biāo)簽來(lái)代替，多行文字的垂直居中可以試試vertical
回答3：可以看一下flex
相關(guān)文章：
1. [python2]local variable referenced before assignment問(wèn)題2. 求救一下，用新版的phpstudy，數(shù)據(jù)庫(kù)過(guò)段時(shí)間會(huì)消失是什么情況？3. mysql - 如何在有自增id的情況下，讓其他某些字段能不重復(fù)插入4. python小白，關(guān)于函數(shù)問(wèn)題5. django - Python error: [Errno 99] Cannot assign requested address6. angular.js - 百度支持_escaped_fragment_嗎？7. java - 線上應(yīng)用，如果數(shù)據(jù)庫(kù)操作失敗的話應(yīng)該如何處理？8. node.js - win 下 npm install 遇到了如下錯(cuò)誤 會(huì)導(dǎo)致 無(wú)法 run dev么？9. python小白 關(guān)于類里面的方法獲取變量失敗的問(wèn)題10. Python2中code.co_kwonlyargcount的等效寫(xiě)法
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備