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 reset the input css to the defaults in Bootstrap 3.2

    How to fix the css red notification bubble

    How to style last tag img css?

    css how to prevent content from drifting underneath fixed position areas?

    how to increase the font-size without making it thicker

    How to emulate Google greyed-out suggested text in input element?

    How to get innerHTML of a node using scrapy Selector?

    How do I apply a border around a checkbox when checked?

    how to set border spacing in javafx

    Hover on “everything but” aka “spotlight” effect: how to make smooth & easy hover transitions?

    How to locate element inside css footer

    How to change css pseudo-element through javascript?

    How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?

    How do you put in percentage based margin to a CSS grid?

    how to make nested flexboxes work

    Determining if shown dates in a table are before today's date using jQuery

    select tag in Google Chrome shows lowercase options

    How do I style forms using CSS

    How do I select certain siblings via CSS?

    How to get a reference to id=“xxx.yyy” in CSS?

    CSS - How to avoid element content to be displayed on 2 lines

    Where and how do i call different CSS for different browsers in my MVC website?

    How to include css file in a JavaFx Spring application

    How to draw a centered line with a rectangle to one side in CSS

    How to refer in CSS to all elements that have some attribute?

    How to change list item color with JQuery

    How to make commandeButon to vertical align?

    Change jQuery slideshow script to rotate background image defined in css class

    How can I get the
    div to properly wrap my two buttons?

    How do you get multiple views in one window like JSFiddle does [closed]