demo在这https://jsfiddle.net/f2m02kz2/文字外围的背景必须是正方形,使用table-cell的话就变成长方形?文字在不同屏幕下变化,而且要在不同的屏幕下居中?不知该如何实现?
走同样的路,发现不同的人生
1. Use css3’s box, flex layout 2. Use table-cell,
css3
box
flex
table-cell
<p class="search_box"> <a href="" title="搜索" class="search_02" > <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; }
It is recommended to use multiple p tags instead of . For vertical centering of multi-line text, you can try vertical
You can take a look at flex
1. Use
css3
’sbox
,flex
layout2. Use
table-cell
,It is recommended to use multiple p tags instead of
. For vertical centering of multi-line text, you can try vertical
You can take a look at flex