前端 - 如何實現自適應的多行文字垂直居中?
問題描述
demo在這https://jsfiddle.net/f2m02kz2/文字外圍的背景必須是正方形,使用table-cell的話就變成長方形?文字在不同屏幕下變化,而且要在不同的屏幕下居中?不知該如何實現?
問題解答
回答1:1.使用css3的box、flex布局2.使用table-cell,
<p class='search_box'> <a href='http://www.gepszalag.com/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 - 手機點擊input時,button會被頂上去?求解決!!!2. 百度地圖api - Android 百度地圖 集成了定位,導航 相互的jar包有沖突?3. python - django 按日歸檔統計訂單求解4. 網頁爬蟲 - python爬蟲用BeautifulSoup爬取<s>元素并寫入字典,但某些div下沒有這一元素,導致自動寫入下一條,如何解決?5. javascript - vue-mint UI - icon在哪里有文檔?6. HTML5禁止img預覽該怎么解決?7. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。8. html5 - 表單無法屏蔽自動填充 autocomplete=off9. html - 請教一個前端css問題。10. 請教一個python字符串處理的問題?
