button按钮居中-白红宇

button按钮居中

阅读量：5918 次

发布时间：2019-06-19

本文共 1080 字，大约阅读时间需要 3 分钟。

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

1.<!DOCTYPE html>

<html>

<head>

p,input,button{

text-align: center;

　　}

</style>

</head>

<body>

<p>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</p>

</body>

</html>

页面效果（p标签居中了，但是按钮不居中，创建按钮可以用input和button标签）：

2.<!DOCTYPE html>

<html>

<head>

/*p,input,button{

text-align: center;

}*/

div{

text-align: center;

}

</style>

</head>

<body>

<div>

<p>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</p>

</div>

</body>

</html>

页面效果：

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

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

转载于:https://www.cnblogs.com/chengyuyu/p/6511329.html

你可能感兴趣的文章