Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    need to center button of unknown width

    I am trying to center a button with a div wrapped around it which is all inside another div.

    Code:
    <div class="wrapper">
    
    <div class="button_wrapper">
    <input type="button" value="button" />
    </div>
    
    </div>
    I have tried my css set up as such:

    Code:
    .wrapper
    {
    width: 500px;
    }
    
    .button_wrapper
    {
    margin: 0px auto;
    }
    I would love to define the width of button_wrapper but the width of the button changes based on the value in it. My only idea so far is to identify the width of the button dynamically via javascript, asign that width to button_wrapper so the margin: 0px auto; actually serves a purpose.

    If this idea sounds logical, any idea how to do this? If not, all suggestions will be appreciated.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    .wrapper
    {
    width: 500px;
    text-align:center
    }
    
    .button_wrapper
    {
    /*margin: 0 auto*/
    display:inline-block;
    }
    The input is an inline element so will centre anyway.
    I'm assuming you need .button_wrapper for styling, otherwise you could just get rid of it entirely.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •