tags:

views:

1947

answers:

3

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>
+1  A: 

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.

Jon
Will that center it vertically as well?
Zoidberg
This will align the text horizontally only.
rahul
Oops.. sorry. I guess I answered too quickly.
Jon
A: 

Vertical Centering in CSS

You can center the text horizintally using

text-align: center;
rahul
A: 

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.

Antony Carthy