Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I center (vertically and horizontally) buttons in a div tag?

Tags:

html

css

center

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>
like image 979
jsteele Avatar asked Aug 18 '09 11:08

jsteele


People also ask

How do I center a vertically and horizontally 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.

How do I center two buttons in CSS?

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.

How do you center vertically and horizontally in HTML?

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.


2 Answers

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.

like image 196
Antony Carthy Avatar answered Sep 29 '22 00:09

Antony Carthy


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.

like image 20
jgallant Avatar answered Sep 29 '22 00:09

jgallant