Come posso concentro pulsanti (verticale e orizzontale) in un tag div?

Question

Sto cercando di determinare come centrare i pulsanti (verticale e orizzontale) in un tag div.

Dato il seguente 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;
}

Mi piacerebbe avere i pulsanti in questo markup centrato. Come posso modificare il CSS per raggiungere questo obiettivo?

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

Answer 1

impostare i margini intorno all'oggetto di prendere il resto dello spazio. Se si vuole centrare una 50px da 50px div in un 100px da 100px div, allora si avrà impostare un margine di 25px 50px intorno al div.

Answer 2

Impostare le voci all'interno del vostro div in questo modo:

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

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

** Ho appena fatto un esempio in linea di mostrare ciò che volevo dire.

Answer 3

centratura verticale in CSS

È possibile centrare il testo horizintally utilizzando

text-align: center;

Answer 4

Ecco una soluzione che utilizza CSS trasformare (dovuto aggiungere un class="button_group" contenitore per i due elementi di input nella colonna centrale per centrare correttamente):

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>