button按钮居中
今天在寫頁面時，發(fā)現(xiàn)給button按鈕設(shè)置居中時，css頁面寫了text-align="center"，但是不起作用，用了display屬性也無作用，試了好多次發(fā)現(xiàn)要給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標(biāo)簽居中了，但是按鈕不居中，創(chuàng)建按鈕可以用input和button標(biāo)簽）：
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>
頁面效果：
?
?第一次寫博客，也是前端新手，如有不當(dāng)之處，歡迎指正，謝謝
更新下：因為下面第一條評論的小伙伴的指教，再加點，text-align: 屬性規(guī)定元素中的文本的水平對齊方式， 該屬性通過指定行框與哪個點對齊，從而設(shè)置塊級元素內(nèi)文本的水平對齊方式，對于input/button/img等標(biāo)簽也可以設(shè)置display：block屬性使其變成塊級元素，再加上width，margin:0 auto；來實現(xiàn)居中。
總結(jié)
以上是生活随笔為你收集整理的button按钮居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tiktok设备注册＋xg xk xl
- 下一篇： Markdown语法学习笔记