Home >Web Front-end >HTML Tutorial >How to center button
How to center button
- 高洛峰Original
- 2017-03-08 16:03:1024083browse
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> Page effect (the p label is centered, but the button is not centered. You can use input and button labels to create buttons):
<!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>Page effect:
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!