文章詳情頁
前端 - 如何實現自適應的多行文字垂直居中？
瀏覽：80日期：2024-06-11 16:26:22
問題描述
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. javascript - js 寫一個正則 提取文本中的數據2. javascript - 為什么我的vue里的router-link不起作用3. javascript - js一個小的算法問題，找個好一點的答案。4. javascript - vue子路由匹配渲染到頂級視圖層問題5. 算法 - python 給定一個正整數a和一個包含任意個正整數的 列表 b，求所有<=a 的加法組合6. javascript - 游戲里物體角色層次渲染邏輯和代碼怎么寫才好？7. javascript - 發現個奇怪的問題，寫的css動畫當我把標簽頁收起時動畫自動暫停了8. javascript - 新組成的數組打印出來出現問題，里面有對象，但長度為空9. javascript - 關于Lazyload遇到的問題10. javascript - 如果根據參數給table中的tr綁定不同事件
排行榜
網公網安備