如何让按钮在div中居中？

发布于 2024-12-07 04:57:26 字数 281 浏览 0 评论 0原文

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

我想在其中放置一个按钮，我该怎么做？

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

原文

I have a div that's width is 100%.

I'd like to center a button within it, how might I do this?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咋地 2024-12-14 04:57:27

更新答案

更新是因为我注意到这是一个活跃的答案，但是 Flexbox 现在是正确的方法。

现场演示

垂直和水平对齐。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

只是水平（只要主弹性轴是水平的，这是默认的）

#wrapper {
  display: flex;
  justify-content: center;
}

使用固定宽度且没有弹性框的原始答案

如果原始海报想要垂直和居中对齐，那么对于固定宽度和高度来说非常容易按钮，尝试以下

实时演示

CSS< /strong>

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

仅水平对齐使用

button{
    margin: 0 auto;
}

或

div{
    text-align:center;
}

Updated Answer

Updating because I noticed it's an active answer, however Flexbox would be the correct approach now.

Live Demo

Vertical and horizontal alignment.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Just horizontal (as long as the main flex axis is horizontal which is default)

#wrapper {
  display: flex;
  justify-content: center;
}

Original Answer using a fixed width and no flexbox

If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following

Live Demo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

for just horizontal alignment use either

button{
    margin: 0 auto;
}

div{
    text-align:center;
}

回复收藏 0 原文

仲春光 2024-12-14 04:57:27

你可以做：

<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 内的所有内容居中对齐。另一个将仅将按钮居中对齐。

You could just make:

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

Or you could do it like this instead:

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

The first one will center align everything inside the div. The other one will center align just the button.

回复收藏 0 原文

金橙橙 2024-12-14 04:57:27

et voila：

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

更新：如果OP正在寻找水平和垂直中心，这个答案就可以了它用于固定宽度/高度的元素。

et voila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

Update: If OP is looking for horizontal and vertical centre, this answer will do it for a fixed width/height element.

回复收藏 0 原文

魔法少女 2024-12-14 04:57:27

保证金：0 自动；是仅水平居中的正确答案。
对于像这样的居中方式，使用jquery：

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

更新...五年后，可以在父 DIV 元素上使用 flexbox 轻松地将按钮居中水平和垂直。

包括所有浏览器前缀，以获得最佳支持

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

Margin: 0 auto; is the correct answer for horizontal centering only.
For centering both ways something like this will work, using jquery:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Update ... five years later, one could use flexbox on the parent DIV element to easily center the button both horizontally and vertically.

Including all browser prefixes, for best support

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

回复收藏 0 原文

黎歌 2024-12-14 04:57:27

由于提供的详细信息有限，我将假设最简单的情况，并说您可以使用 text-align: center：

div {
  background: blue;
  padding: 1em;
  text-align: center;   
}

<div><button>test</button></div>

With the limited detail provided, I will assume the most simple situation and say you can use text-align: center:

div {
  background: blue;
  padding: 1em;
  text-align: center;   
}

<div><button>test</button></div>

回复收藏 0 原文

柠檬色的秋千 2024-12-14 04:57:27

使用 flexbox

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

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

<button class="Center">Demo</button>

Using flexbox

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

And then adding the class to your button.

<button class="Center">Demo</button>

回复收藏 0 原文

审判长 2024-12-14 04:57:27

您应该简单一点：

首先您有文本或按钮的初始位置：

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

通过将此 css 代码行添加到 h2 标记或div 包含按钮标签的标签

样式：“文本对齐：居中;”

最终结果代码将是：

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

< img src="https://i.sstatic.net/YmCJD.png" alt="在此处输入图像描述">

You should take it simple here you go :

first you have the initial position of your text or button :

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

By adding this css code line to the h2 tag or to the div tag that holds the button tag

style:" text-align:center; "

Finaly The result code will be :

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

回复收藏 0 原文

北城半夏 2024-12-14 04:57:27

要将

回复收藏 0 原文

余厌 2024-12-14 04:57:27

假设div是#div，button是#button：

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

然后像往常一样将按钮嵌套到div中。

Supposing div is #div and button is #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Then nest the button into div as usual.

回复收藏 0 原文

风柔一江水 2024-12-14 04:57:27

最简单的事情是将其输入为“div”，给它一个“margin:0 auto”，但如果你希望它居中，你需要给它一个宽度

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

Easiest thing is input it as a "div" give it a "margin:0 auto " but if you want it to be centered u need to give it a width

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

回复收藏 0 原文

So尛奶瓶 2024-12-14 04:57:27

响应式 CSS 选项可将按钮垂直和水平居中，而无需关心父元素大小（为了清晰和分离问题使用数据属性挂钩）：

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Fiddle：https://jsfiddle.net/crrollyson/zebo1z8f/

Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns):

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

回复收藏 0 原文

戏舞 2024-12-14 04:57:27

将按钮置于 div 中心的响应式方法：

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

Responsive way to center your button in a div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

回复收藏 0 原文