web-dev-qa-db-ja.com

divタグでボタンを（垂直および水平に）中央に配置するにはどうすればよいですか？

Divタグでボタンを（垂直および水平に）中央揃えする方法を決定しようとしています。

次の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;
}

このマークアップのボタンを中央に配置したいと思います。これを実現するために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>
csshtmlcenter
20
jsteele

オブジェクトの周囲に余白を設定して、残りのスペースを占有します。 50px x 50px divを100px x 100px divの中央に配置する場合は、50px divの周りに25pxのマージンを設定します。

17
Antony Carthy

Div内のアイテムを次のように設定します。

マージン：0px auto 0px auto; text-align：center;

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

**私が意味することを示すために、インラインの例を実行しました。

9
jgallant

CSSの垂直方向のセンタリング

を使用してテキストを水平方向に中央に配置できます

text-align: center;
0
rahul

CSS変換を使用したソリューションは次のとおりです（コンテナclass="button_group"中央の列の2つの入力要素に対して、それらを正しく中央揃えするため）：

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>
0
user2314737