首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在div元素中水平居中按钮元素?

如何在div元素中水平居中按钮元素?
EN

Stack Overflow用户
提问于 2013-03-09 01:52:47
回答 3查看 103.9K关注 0票数 53

我不想将CSS添加到我的div元素中(例如<div style="text-align: center;">)。

我只想将CSS代码添加到按钮元素中。

代码语言:javascript
复制
<div>
  <button>Button</button>
</div>

在这种情况下,如何使按钮水平居中?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-03-09 01:54:59

代码语言:javascript
复制
button {
    margin:0 auto;
    display:block;
}

代码语言:javascript
复制
button {
  margin: 0 auto;
  display: block;
}
代码语言:javascript
复制
<div>
  <button>Button</button>
</div>

票数 136
EN

Stack Overflow用户

发布于 2013-03-09 01:55:31

您需要在<button>上使用display: block; margin: auto;jsFiddle

票数 5
EN

Stack Overflow用户

发布于 2013-03-09 02:03:43

其他人已经提到了margin: 0 auto;方法,但是如果您需要解释,浏览器会在您的元素所在的任何容器中拆分可用的空间。

同样重要的是要指出的是,你可能需要给你的元素一个宽度,这是正确的工作。

所以,总而言之:

代码语言:javascript
复制
button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15300234

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档