How do I center (vertically and horizontally) buttons in a div tag?
Question
I am trying to determine how to center (vertically and horizontally) buttons in a div tag.
Given the following 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?
<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>
Solution
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.
OTHER TIPS
Set the items inside your div like so:
margin: 0px auto 0px auto; text-align: center;
<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.
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):
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>