button按钮居中的方法

来源：动视网责编：小采时间：2020-11-27 15:35:15

button按钮居中的方法

button按钮居中的方法:今天在写页面时，发现给button按钮设置居中时，css页面写了text-align="center"，但是不起作用，用了display属性也无作用，试了好多次发现要给button按钮添加个p，然后让p居中就可以了。以下写个test来说明下：<!DOCTYPE ht

推荐度：

点击下载本文 文档为doc格式

导读button按钮居中的方法:今天在写页面时，发现给button按钮设置居中时，css页面写了text-align="center"，但是不起作用，用了display属性也无作用，试了好多次发现要给button按钮添加个p，然后让p居中就可以了。以下写个test来说明下：<!DOCTYPE ht

今天在写页面时，发现给button按钮设置居中时，css页面写了text-align="center"，但是不起作用，用了display属性也无作用，试了好多次发现要给button按钮添加个p，然后让p居中就可以了。以下写个test来说明下：

<!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标签）：

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>

页面效果：

button按钮居中的方法

第一次写博客，也是前端新手，如有不当之处，欢迎指正，谢谢

更新下：因为下面第一条评论的小伙伴的指教，再加点，text-align: 属性规定元素中的文本的水平对齐方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式，对于input/button/img等标签也可以设置display：block属性使其变成块级元素，再加上width，margin:0 auto；来实现居中。

button按钮居中的方法

推荐度：

点击下载本文 文档为doc格式

标签：居中方式居中的方法

热门焦点

button按钮居中的方法

button按钮居中的方法

button按钮居中的方法

最新推荐

猜你喜欢

热门推荐