CSS centre a div with nested divs to the true center of the Browser without specifying widths_问答_开发者

CSS centre a div with nested divs to the true center of the Browser without specifying widths

开发者 https://www.devze.com 2023-02-25 11:03 出处：网络

OMG, Really I\'ve been here a thousand times before. I am so going to snippet this answer. I cannot believe how hard it is to do something as easy as this.

相关专题：centering css

OMG, Really I've been here a thousand times before. I am so going to snippet this answer. I cannot believe how hard it is to do something as easy as this.

<body>
    <div class="wrapper">
         <div class="class1">Page 1 of 1</>
         <div class="class1"> — </>
         <div class="class1">Next</>
    </div>
</body>

I need the wrapper to be dead centre to the browser. Doesn't matter what the length of the text within is, or the amount of divs. How on earth does one do this?! I'm freaking out here. I'm not that bad at CSS. Googling this turns up forum posts from 2005. Or answers are found because the width was specified so that's 开发者_如何学JAVAjust cheating.

Hair is being pulled out!

I won't put my CSS in here cos it's just not working, theres no point.

Thanks.

Maybe I'm missing something, but why does this not work for you?:

.wrapper {
     text-align:center;   
}

You said your CSS wasn't relevant, so either this is too easy or I'm missing something. Then again - sometimes the simplest solution is the best one.

If you need the inner divs displayed a certain way, you didn't mention it - so I didn't include it.

OK didn't specify that the divs within need to float next to each other

OK, then use display:inline on the inner divs:

.wrapper div {
    display:inline;
}

"But I need them displayed block and they MUST be floated!"

OK, then just float them and use a clearfix if you need it.

.wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

This still works fine floating the inner divs without the clearfix, but you didn't provide a mockup of what you wanted so it makes answering this question more difficult.

IMO float is used in many situations where it is not needed, which can cause a lot of layout problems. It's a very poorly understood property and gets abused regularly.

Working jsfiddle: http://jsfiddle.net/6utN2/1/

I think you'd have been better off coding this with a UL and using the LI for your 3 elements.

Here's why: .wrapper MUST act as the container for those 3 divs because you've floated them - taking them out of the document flow.

The only way to reign in the problem caused by this is to wrap your wrapper...which is not the leanest solution one could write.

The UL technique works great here, though not that intuitive at first, BUT the UL is the container, LIs can all float left (and will stay nested within their parent). Finally, a single div could be used to span whatever element the UL resides, and center it.

ps - I used .fauxBody as the wrapping wrapper - just a heads up.

without specifying a width? Without specifying a width on the wrapper it will be 100% of the body. If you do set a width you only need:

#wrapper { width: 960px; margin: 0 auto; }

As a div is a block-level element, it needs to have a width specified to take less than 100% of the browser's width. Typically, with a defined width you could use margin: 0 auto 0 auto; (top, right, bottom and left) to centre the div.

Failing that, you could use:

#wrapper {
    display: inline-block;
    margin: 0 auto;
}

Which reduces the #wrapper div to the width of its contents, and then centres it in the window. This is not compatible with IE < 7, I believe, as a div does not, 'naturally,' have a display: inline.