按钮高度自适应，按钮文字如何设置垂直居中？

发布于
2017-12-11

代码和实现结果如下，其实想实现的按钮文字的水平垂直居中，不知道为什么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>

css html

阅读 23.2k

6 个回答

得票最新

WytheChan

77643454

发布于
2017-12-11

✓ 已被采纳

为什么用span,直接用button标签，水平垂直都会自动居中，把button多余的边框样式改改就行。

山佳

53351934

发布于
2017-12-11

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

白吟灵

2k1315

发布于
2017-12-11

.fl{
    float: left;
    line-height:2.8rem;
}

话说什么是高度自适应呀？我看你代码不是设置上下padding了吗？

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

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

我不是艾克

52445475

发布于
2017-12-11

<!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;只能对内敛元素有用，对块级元素没用，而且，你放在父元素上没有的啊
推荐 http://www.zhangxinxu.com/wor...