How to center button-HTML Tutorial-php.cn

How to center button

高洛峰

Release： 2017-03-08 16:03:10

Original

24055 people have browsed it

When I was writing the page today, I found that when setting the button button to be centered, the css page wrote text-align="center", but it did not work. Using the display attribute also had no effect. I tried many times and found that the button had to be centered. Just add a p to the button and then center the p. Write a test below to illustrate:

<!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>

Copy after login

Page effect (the p label is centered, but the button is not centered. You can use input and button labels to create buttons):

How to center button

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

Copy after login

Page effect:

How to center button

This is my first time writing a blog, and I am also a newbie on the front end. If there is anything inappropriate, please correct me. Thank you

Update: Because of the advice of the friend in the first comment below, I would like to add another point, the text-align: attribute specifies the horizontal alignment of the text in the element. This attribute specifies which point the line box is aligned with. , thereby setting the horizontal alignment of text within block-level elements. For labels such as input/button/img, you can also set the display: block attribute to make it a block-level element, plus width, margin: 0 auto; to achieve centering.

The above is the detailed content of How to center button. For more information, please follow other related articles on the PHP Chinese website!