Html 如何在 div 标签中居中（垂直和水平）按钮？

How do I center (vertically and horizontally) buttons in a div tag?

提问by jsteele

I am trying to determine how to center (vertically and horizontally) buttons in a div tag.

我正在尝试确定如何在 div 标签中居中（垂直和水平）按钮。

Given the following CSS:

鉴于以下 CSS：

div.listBoxMoverUserControl
{
    width: 350px;
    height: 175px;
}

div.listBoxMoverUserControl div 
{
    height: 150px;
}

div.listBoxMoverUserControl div select
{
    width: 150px;
    height: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column1
{
    float: left;
    width: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column2
{
    float: left;
    width: 50px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column3
{
    float: left;
    width: 150px;
}

I would like to have the buttons in this markup centered. How can I modify the CSS to achieve this?

我想让这个标记中的按钮居中。如何修改 CSS 以实现此目的？

<div class="listBoxMoverUserControl">
    <div class="listBoxMoverUserControl_column1">
        <label>Test1</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
    <div class="listBoxMoverUserControl_column2">
        <input id="btnMoveRight" type="button" value="->" /> <br />
        <input id="btnMoveLeft" type="button" value="<-" /> <br />
    </div>
    <div class="listBoxMoverUserControl_column3">
        <label>Test2</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
</div>

采纳答案by Antony Carthy

set the margins around the object to take up the rest of the space. If you want to center a 50px by 50px div in a 100px by 100px div, then you will set a margin of 25px around the 50px div.

设置对象周围的边距以占据其余空间。如果您想将 50px x 50px div 居中放置在 100px x 100px div 中，那么您将在 50px div 周围设置 25px 的边距。

回答by jgallant

Set the items inside your div like so:

像这样设置 div 中的项目：

margin: 0px auto 0px auto; text-align: center;

边距：0px 自动 0px 自动；文本对齐：居中；

<div class="listBoxMoverUserControl_column1" style="margin: 0px auto 0px auto; text-align: center;">

** I just did an inline example to show you what I meant.

** 我只是做了一个内联示例来向您展示我的意思。

回答by rahul

Vertical Centering in CSS

CSS 垂直居中

You can center the text horizintally using

您可以使用水平居中文本

text-align: center;

回答by user2314737

Here's a solution using CSS transform (had to add a container class="button_group"for the two input elements in the middle column in order to center them correctly):

这是一个使用 CSS 变换的解决方案（必须为class="button_group"中间列中的两个输入元素添加一个容器，以便它们正确居中）：

div,
label,
button_group {
  border: 1px solid blue;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div.listBoxMoverUserControl {
  width: 352px;
  height: 150px;
}

div.listBoxMoverUserControl div {
  height: 150px;
}

div.listBoxMoverUserControl div select {
  width: 150px;
  height: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column1 {
  float: left;
  width: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column2 {
  float: left;
  width: 50px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column3 {
  float: left;
  width: 150px;
}

div.listBoxMoverUserControl_column1,
div.listBoxMoverUserControl_column2,
div.listBoxMoverUserControl_column3 {
  /* centering */
  position: relative;
}


/* centering */
.button_group {
  height: auto !important;
}

div label,
.button_group {
  /* centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="listBoxMoverUserControl">
  <div class="listBoxMoverUserControl_column1">
    <label>Test1</label>
  </div>
  <div class="listBoxMoverUserControl_column2">
    <div class="button_group">
      <input id="btnMoveRight" type="button" value="->" /> <br />
      <input id="btnMoveLeft" type="button" value="<-" /> <br />
    </div>
  </div>
  <div class="listBoxMoverUserControl_column3">
    <label>Test2</label>
  </div>
</div>