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

如何在div中居中按钮?
EN

Stack Overflow用户
提问于 2011-09-27 04:20:06
回答 9查看 921.8K关注 0票数 262

我有一个宽度为100%的div。

我想把一个按钮放在中间,该怎么做呢?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

EN

回答 9

Stack Overflow用户

发布于 2014-11-06 21:21:57

你可以这样做:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

或者你可以这样做:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

第一个将居中对齐div中的所有内容。另一个只会居中对齐按钮。

票数 127
EN

Stack Overflow用户

发布于 2011-09-27 04:24:14

由于提供的细节有限,我将假定最简单的情况,并说您可以使用text-align: center

http://jsfiddle.net/pMxty/

票数 7
EN

Stack Overflow用户

发布于 2015-12-09 00:45:17

使用flexbox

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

然后将类添加到您的按钮。

<button class="Center">Demo</button> 
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7560832

复制
相关文章

相似问题

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