关于css:单行文字垂直居中

42次阅读

共计 943 个字符，预计需要花费 3 分钟才能阅读完成。

html 构造：

<div class="pay">
   立刻领取 ￥XXX
</div>

css 代码：

.pay{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #080304;
    background: #F7B529;
    border-radius: 6px;
    text-align: center;
}

解释：
line-height 与里面的 height 的高度一致
height: 44px;
line-height: 44px;

html 构造：

<div class="pay">
    <p class="txt"> 立刻领取 ￥XXX</p>
</div>

css 代码：

.pay{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #080304;
    background: #F7B529;
    border-radius: 6px;
    text-align: center;
    display: table;    
 }

.pay .txt{
    display: table-cell;
    vertical-align: middle;
}

解释：
父元素 display: table;
子元素
display: table-cell;
vertical-align: middle;

html 构造：

<div class="pay">
    <p class="txt"> 立刻领取 ￥XXX</p>
</div>

css 代码：

.pay{
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #080304;
    background: #F7B529;
    border-radius: 6px;
    text-align: center;
}

.pay .txt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

文字定宽才有成果，否则如果去计算的话，此办法不佳，则不倡议应用

正文完