文章詳情頁
前端 - 如何實(shí)現(xiàn)自適應(yīng)的多行文字垂直居中？
瀏覽：227日期：2024-06-11 16:26:22
問題描述
demo在這https://jsfiddle.net/f2m02kz2/文字外圍的背景必須是正方形，使用table-cell的話就變成長方形？文字在不同屏幕下變化，而且要在不同的屏幕下居中？不知該如何實(shí)現(xiàn)？
問題解答
回答1：1.使用css3的box、flex布局2.使用table-cell，
<p class='search_box'> <a href='http://www.leifengta.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：
建議使用多個(gè)p標(biāo)簽來代替，多行文字的垂直居中可以試試vertical
回答3：可以看一下flex
相關(guān)文章：
1. docker網(wǎng)絡(luò)端口映射，沒有方便點(diǎn)的操作方法么？2. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問？3. vim - docker中新的ubuntu12.04鏡像,運(yùn)行vi提示,找不到命名.4. 為什么我ping不通我的docker容器呢？？？5. angular.js - angular內(nèi)容過長展開收起效果6. html5和Flash對抗是什么情況？7. golang - 用IDE看docker源碼時(shí)的小問題8. 我何時(shí)應(yīng)該在Java中使用JFrame.add（component）和JFrame.getContentPane（）。add（component）9. 前端 - @media query 使用出現(xiàn)的問題？10. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯誤？
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備