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>
You can do this by setting the display property to “flex.” Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Sometimes you might want to have two buttons next to each other, but to center both together on the page. You can achieve this by wrapping both buttons in a parent <div> and using flexbox to center them on the page. Notice that we also added margin-right: 20px to the first button, in order to add space between them.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With