前端 - 如何实现自适应的多行文字垂直居中?
怪我咯
怪我咯 2017-04-17 11:27:08
0
3
652

demo在这https://jsfiddle.net/f2m02kz2/
文字外围的背景必须是正方形,使用table-cell的话就变成长方形?
文字在不同屏幕下变化,而且要在不同的屏幕下居中?不知该如何实现?

怪我咯
怪我咯

走同样的路,发现不同的人生

reply all(3)
迷茫

1. Use css3’s box, flex layout
2. Use 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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template