Làm cách nào để các nút giữa (theo chiều dọc và chiều ngang) trong thẻ div?

Question

Tôi đang cố gắng xác định cách căn giữa (theo chiều dọc và chiều ngang) trong thẻ div.

Với CSS sau:

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

Tôi muốn có các nút trong đánh dấu này làm trung tâm. Làm thế nào tôi có thể sửa đổi CSS để đạt được điều này?

<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

thiết lập lề xung quanh đối tượng để đưa lên phần còn lại của vũ trụ. Nếu bạn muốn căn giữa 50px x 50px div trong 100px x 100px div, thì bạn sẽ đặt lề 25px xung quanh div 50px.

Answer 2

Đặt mục bên trong div của bạn như vậy:

margin: 0px 0px auto tự động; căn chỉnh văn bản: trung tâm;

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

** Tôi vừa làm một ví dụ nội tuyến để cho bạn thấy ý tôi là gì.

Answer 3

Vertical Centering in CSS

Bạn có thể tập trung các văn bản horizintally sử dụng

text-align: center;