首頁  >  問答  >  主體

前端 - 如何实现自适应的多行文字垂直居中?

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

怪我咯怪我咯2767 天前653

全部回覆(3)我來回復

  • 迷茫

    迷茫2017-04-17 11:29:08

    1.使用css3boxflex版面
    2.使用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;
    }

    回覆
    0
  • 迷茫

    迷茫2017-04-17 11:29:08

    建議使用多個p標籤來取代
    ,多行文字的垂直居中可以試試vertical

    回覆
    0
  • 阿神

    阿神2017-04-17 11:29:08

    可以看一下flex

    回覆
    0
  • 取消回覆