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


Tags: css,html,center

Problem :

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.


    CSS Howto..

    How to load an image with css using Django

    How to make the buttons responsive?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How can I make html table columns (only the ones with text) evenly spaced

    How can I add a css element change to an onlick event in this jquery lib?

    How to add a class to only one div on click?

    How do I gather a class' css attributes given nothing but the className?

    CSS: How to place next to each other 2 images with 50 % width?

    How can I dynamically assign css line-height to nested objects using jQuery?

    How to set hover of the block which contains icon with HTML or CSS?

    How to fill parent element background color with CSS?

    How to see CSS boxes in firefox inspector

    CSS Hover Events, How to Trigger a Parent's Effect

    How to remove CSS triangles?

    how to make button with image responsive

    CSS: How do I get my “send” button to line up (move up) and size up (scale) properly?

    How to create rating system using only css [duplicate]

    How to remove an empty line between two navbars

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    How to manually override CSS @media queries?

    How to silently hide “Image not found” icon when src source image is not found

    How to make text flow from left right bootstrap

    How to set a background image in css?

    show button instead of menu bar when browser resize in css/html [closed]

    How to select ids which contain special characters?

    How to use “all” property in CSS

    How to check if an element has a hover property and do something to another element in css [closed]

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to control new line position after CSS display inline-block break