鍍金池/ 問答/HTML/ 按鈕高度自適應(yīng)，按鈕文字如何設(shè)置垂直居中？

按鈕高度自適應(yīng)，按鈕文字如何設(shè)置垂直居中？

代碼和實(shí)現(xiàn)結(jié)果如下，其實(shí)想實(shí)現(xiàn)的按鈕文字的水平垂直居中，不知道為什么vertical-align: middle;沒有生效，求高手指教，多謝~

圖片描述

<!DOCTYPE html>
<html>
    <head>
        <title>aaaa</title> 
        <style>
            .remind_con{
                position: relative;
                padding: 1rem 0 1.8rem;
                border-left: .1rem solid #d0d0d0; 
            }
            .remind_con .remind_btn{
                position: absolute;
                left:0;
                top:0;
                color: #ffffff;
                height: 100%;
                text-align:center;
                vertical-align: middle;
            }
            .button_mode{
                background: #ff773d;
                width:6rem;
                height: 100%;
            }
            .button_del2{
                background: #e83439;
                width: 4.3rem;
                border-radius:0ex .5rem .5rem 0;
                -webkit-border-radius:0 .5rem .5rem 0;
                height: 100%; 
            }
            .fl{
                float: left;
            }
        </style>
    </head>
    <body> 
        <div class="remind_con">
            <div class="remind_btn">
                <span class="button_mode fl">修改</span>
                <span class="button_del2 fl">刪除</span>
            </div>
        </div>
    </body>
</html>
回答
編輯回答
祈歡

1.rem+line-height布局
2.flex,align-items:center布局

2017年11月11日 21:54
編輯回答
愚念

圖片描述

在button_mode的樣式里面添加line-height: 2.5;

2017年3月22日 23:17
編輯回答
安于心

display: flex;
justify-content: center;
align-items: center;

2017年1月14日 22:26
編輯回答
憶當(dāng)年

為什么用span,直接用button標(biāo)簽，水平垂直都會(huì)自動(dòng)居中，把button多余的邊框樣式改改就行。

2017年8月21日 02:40
編輯回答
涼薄
<!DOCTYPE html>
<html>
    <head>
        <title>aaaa</title> 
        <style>
            .remind_btn{
                width: 100px;
                height: 100px;
                display: table;
            }
            .button_mode{
                display: table-cell;
                vertical-align: middle;
            }
        </style>
    </head>
    <body> 
        <div class="remind_con">
            <div class="remind_btn">
                <span class="button_mode fl">修改</span>
                <span class="button_del2 fl">刪除</span>
            </div>
        </div>
    </body>
</html>

vertical-align: middle;只能對內(nèi)斂元素有用，對塊級(jí)元素沒用，而且，你放在父元素上沒有的啊
推薦 http://www.zhangxinxu.com/wor...

2018年3月11日 14:10
編輯回答
撥弦
.fl{
    float: left;
    line-height:2.8rem;
}

話說什么是高度自適應(yīng)呀？我看你代碼不是設(shè)置上下padding了嗎？

.remind_con{
    position: relative;
    padding: 1rem 0 1.8rem;
    border-left: .1rem solid #d0d0d0; 
}

https://codepen.io/WhiteYin/p...

2017年9月30日 11:07