如何实现单行与多行文字的居中

在项目中遇到一个问题,在一个宽度为百分比形式设定宽度的div中,文字可能不多但是也可能较多,会超过一行。怎么才能做到不管1行还是2行3行,文字都可以上下左右居中呈现。

 

解决方法:

1使用flex

只需要这样设置css属性即可

div{

   display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

 

2使用table-cell

父元素display设置为table,子元素display设置为table-cell并且vertical-align设置为middle

代码如下:

<div class="message-box">

    <div class="message-item">

        <p class="item-title">课程下单成功</p>

        <p class="item-time">2017-02-01 10:30</p>

    </div>

    <div class="message-item">

        <p class="item-title">您报名的活动即将开始【作品集日-一起来看展】</p>

        <p class="item-time">2017-02-01 10:30</p>

    </div>

</div>

<style>

    .message-box{

        width: 500px;

        height: 500px;

        background: #333;

    }

    .message-item{

        background: #666;

        padding: 20px;

        width: 100%;

        height: 100px;

        display: table;

        box-sizing: border-box;

    }

    .item-title{

        width: 60%;

        margin: 0;

        display: table-cell;

        vertical-align: middle;

    }

    .item-time{

        width: 40%;

        margin: 0;

        display: table-cell;

        vertical-align: middle;

        text-align: right;

    }

</style>

 

posted on 2018-07-27 17:36  ranyonsue  阅读(515)  评论(0编辑  收藏  举报

导航