Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help centering a div

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #30790
    noahgelman
    Participant

    I have a div that appears after a clicking action. The div is fixed 150px from the top but I need help centering it in the middle. Normally, it would be really easy to center it, but the div width isn’t static, it changes width so I’m having a bit of a problem. I don’t want to use javascript. I want to be able to do this with just CSS. Any ideas?

    btw, margin: 0 auto isnt gonna work since the position is fixed

    #72422
    noahgelman
    Participant

    No help?
    Nooooooooo!!
    And I thought the friendly title would get me some help

    #72420
    Chris Coyier
    Keymaster

    Link?

    #72421
    TheDoc
    Member

    The non-fixed width of the div makes things a little tough, because left: 50%; won’t work. Hmmmmm.

    #72424
    noahgelman
    Participant

    Sorry, on a private server so i can’t provide a link. I could go right:0 left:0, margin:auto and it would center it for me, but it would have to have a set width. I could also left:50% and use some margin to center it but again I would need a set width. But because it changes I’m not sure what to do. I could just use javascript to get the width and center it and yada yada yada but I want to do this with CSS alone.

    #72401
    sylenix
    Member

    use this css hack to center your div:

    text-align: center

    firstly, wrap your div to be centered with 2 more divs;

    put that css hack to the outermost div;
    also, specify the width of your page or use:

    margin: 0 auto;

    next wrapper div:


    display: table;
    margin: 0 auto;

    your div:


    display: table-cell;

    and lastly, this:

    html div.yours {
    display: inline;
    }
    #72362
    jamygolden
    Member

    @sylenix I don’t think that would work as the div is set to position: fixed

    #72385
    noahgelman
    Participant

    Yeah, that wouldn’t work because it’s fixed. However it did give me an idea. If I wrap my current div in another div, and set that to fixed from the top and 100% width, I should be able to give my real div margin: 0 auto

    That should work right?

    #72393
    noahgelman
    Participant

    Figured it out. My top answer wasn’t quite right when I tried it. But, then I remembered an article I read about how to center unordered lists in a nav when you don’t know their width. This is pretty much the same thing.

    First I wrap my main div in another div, which I fix to the top. I then put left:50% on it. Then on my main div I make position relative and put left:-50% on it. And that centers it no matter what the width is.

    #72243
    soap
    Participant

    If a div doesn’t have a fixed width, isn’t it automatically 100%?

    #72239
    noahgelman
    Participant

    yeah, unless you display it inline-block which will allow it to stretch as wide or as thin as I want

    #72005
    soap
    Participant

    I thought inline-block wasn’t supported by all browsers.

    #71933
    noahgelman
    Participant

    There is a bit of incompleteness. IE 6/7 accepts the value only on elements with a natural display: inline. But there are always workarounds

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.