html - How can I center a box of unknown width in CSS?

Question

Welcome To Ask or Share your Answers For Others

html - How can I center a box of unknown width in CSS?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How can I center a box of unknown width in CSS?

I have this html:

<div class="object-box">
    <img ... />
    <span class="caption">This is the caption</span>
</div>

Which is accompanied with this CSS:

.object-box .caption, .object-box img {
    display: block;
}
.object-box {
    border: 1px solid;
}

I would like the surrounding div to shrink-wrap to its contents. I can achieve this by using float: ... or display: inline-block. However, I'd also like it to be centered on the page, using margin: auto. The two approaches don't seem to be compatible.

Is it possible to create such a shrink-wrapped, centered container, without adding a wrapper element?

EDIT:

jsFiddle here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:37:11+0000

<!doctype html>
<html>
    <head>
    <title>ugh</title>
    <style>
        div#not-floated {
        display:table;
        margin:0 auto;
        }

        div#floated {
        float:right;
        position:relative;
        right:50%;
        }

        div#floated-inner {
        float:left;
        position:relative;
        left:50%;
        }

    </style>
    <!--[if lt IE 8]>
        <style type="text/css">

            #container { text-align: center; }
                #container * { text-align: left; }
                div#not-floated {
                    zoom: 1;
                    display: inline;
                }
        </style>
    <![endif]-->

    </head>

    <body>


    <div id="container">
        <div id="not-floated">
        <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"><br>
        ok.
        </div>
    </div>
    <div id="floated-container">
        <div id="floated"><div id="floated-inner">
        <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg">
        </div></div>
    </div>

    </body>

</html>

Simple explanation is.. display:table; causes it to shrinkwrap in modern browsers, thats the only way to center widthless block level in modern browsers with margin:0 auto;.

In IE it's a matter of using parent element to set text-align:center on your shrinkwrapped display:inline block level element.

For floats its just 50% math using containers for IE.

Categories

html - How can I center a box of unknown width in CSS?

html - How can I center a box of unknown width in CSS?

EDIT:

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags