css - 如何实现单行与多行文字的居中
过去多啦不再A梦
过去多啦不再A梦 2017-05-16 13:26:34
[CSS3讨论组]

如图所示,

当本行只有一行时,文字垂直居中, 当有两行文字时,同样使文字垂直居中,如何做到呢?

PS: 不用flex.

过去多啦不再A梦
过去多啦不再A梦

全部回复(8)
PHP中文网

先看效果图

然后是代码实现

<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>
<p class="message-box">
    <p class="message-item">
        <p class="item-title">课程下单成功</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
    <p class="message-item">
        <p class="item-title">您报名的活动即将开始【作品集日-一起来看展】</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
</p>
大家讲道理

从你的布局来看,应该是这样的:左边的文字与右边时间都垂直居中。
一个简单的方法就是:如
布局:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css:
p{display: table;}
span{display: table-cell; vertical-align: middle;}

可以试下

PHP中文网

包含了各种解决方案,传送门

PHPz
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
巴扎黑

<p class="" style="display: table;height: 100px;">

    <p class="" style="display: table-cell;vertical-align: middle;">
        sadfsadf
    </p>
    <p class="" style="display: table-cell;vertical-align: middle;">
        sadfsadf
    </p>
</p>
过去多啦不再A梦
<p class="one">
    <p class="two>
        文字
    </p>
</p>
.one {
    position: relative;
    }
.two {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
仅有的幸福

根据你提供的图来看,每一条内容都是定高的,所以设置最外层父元素line-height等于自身高度 里面的p标签 display:inline-block;vertical-align: middle;
代码结构

<ul>
    <li>
        <p></p><span></span>
    </li>
    <li>
        <p></p><span></span>
    </li>
    <li>
        <p></p><span></span>
    </li>
</ul>
给我你的怀抱

可以看下我总结的这些方法。传送门
题主需要的就是多行文字垂直居中的方法吧。我总结的文章里面有典型的方法可以实现,例子如下。
http://codepen.io/zengkan0703...
不知道是题主踩的我的答案吗?如果是,我希望能回答我为什么。如果不是,上面的例子应该能解决你的需求。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号