SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Montreal
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap - make div size of content + centered

    I am using Bootstrap 3, and trying to figure out how to
    create a div that stretches to the same width of its content.

    Everything I try, pretty much makes the div 100% width,
    or I have to enter a fixed size which is not what I want.

    I uploaded the site here:
    http://www.chrisdrogaris.com/temp/PR...mint/main.html

    The section I tested is where it says: testtesttesttesttesttesttest

    I basically just want a div around the test text that is the same size as it.

    Thanks for any help.

    Take care,
    Chris

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You can use div {display:table;margin:0 auto;}. display:table hugs its contents, margin:0 auto centers it in its container. There are other methods, but this is the easiest. IE8+

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ron said display:table will do what you want as widthless tables can be centred with margin:auto unlike widthless divs.

    If you need less that IE8 support (which I doubt as bootstrap doesn't really support IE7 IIRC) then you can use display:inline-block instead. Although IE7 and under don't understand inline-block natively on block elements they can be fixed with a simple hack as follows.

    Code:
    .el{
    display:inline-block;
    *display:inline;/* ie7 and under inline-block hack */
    *zoom:1.0;/* "  " */
    }
    You would then just need text-align:center on the parent of that div as inline-block elements are then centred just like normal text.

  4. #4
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Montreal
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thanks guys... works great.


Bookmarks

Posting Permissions

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