button按钮居中

来源:转载

今天在写页面时,发现给button按钮设置居中时,css页面写了text-align="center",但是不起作用,用了display属性也无作用,试了好多次发现要给button按钮添加个div,然后让div居中就可以了。以下写个test来说明下:

1.<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p,input,button{
            text-align: center;
     }
    </style>
</head>
<body>
    <p>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</p>
    <input type="button" value="点我握手哦"/><br/>
    <button type="button">点我呀</button>
</body>
</html>

页面效果(p标签居中了,但是按钮不居中,创建按钮可以用input和button标签):

2.<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        /*p,input,button{
            text-align: center;
        }*/
        div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</p>
        <input type="button" value="点我握手哦"/><br/>
        <button type="button">点我呀</button>
    </div>
</body>
</html>

页面效果:

 第一次写博客,也是前端新手,如有不当之处,欢迎指正,谢谢

分享给朋友:
您可能感兴趣的文章:
随机阅读: