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>

頁面效果:

 

 第一次寫博客,也是前端新手,如有不當之處,歡迎指正,謝謝

更新下:因為下面第一條評論的小伙伴的指教,再加點,text-align: 屬性規定元素中的文本的水平對齊方式, 該屬性通過指定行框與哪個點對齊,從而設置塊級元素內文本的水平對齊方式,對於input/button/img等標簽也可以設置display:block屬性使其變成塊級元素,再加上width,margin:0 auto;來實現居中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM