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；來實現居中。
總結
以上是生活随笔為你收集整理的button按钮居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tiktok设备注册＋xg xk xl
- 下一篇： Markdown语法学习笔记