时间:2021-07-01 10:21:17 帮助过:16人阅读
<!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标签):
<!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>
页面效果:
第一次写博客,也是前端新手,如有不当之处,欢迎指正,谢谢
更新下:因为下面第一条评论的小伙伴的指教,再加点,text-align: 属性规定元素中的文本的水平对齐方式, 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式,对于input/button/img等标签也可以设置display:block属性使其变成块级元素,再加上width,margin:0 auto;来实现居中。
以上就是button按钮居中的方法的详细内容,更多请关注Gxl网其它相关文章!