发表新帖
发表新帖

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

后端 未结
关注
7 759
被撕碎了的回忆
被撕碎了的回忆 2020-12-13 19:39

I have this html:


    
    This is the caption
&l         


        

                      

              相关标签:
7条回答
  • 猫巷女王i
    2020-12-13 19:51

    CSS now has something called the flex layout and in my limited use so far it's worked very well.

    https://www.w3.org/TR/css-flexbox-1/

    Try something along these lines:

    <html>
<head>
<style>
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-box {
    border: 1px solid;
}
</style>
</head>
<body>
  <div class="object-box">
    <img ... />
    <span class="caption">This is the caption</span>
  </div>
</body>
</html>
    0 讨论(0)
  • 野趣味
    2020-12-13 19:56

    something along this should work

    HTML:

    <msgbox>
    <p>
        foo
    </p>
</msgbox>

    and CSS:

    msgbox {
    width: 100%;
    display: block;
    text-align: center;
}
p {
    display: inline-block;
}

    ... only sad thing is, the msgbox element, when using position absolute, blocks clicking through it (but that is only a related problem, and might not be one for you)

    0 讨论(0)
  • 后悔当初
    2020-12-13 20:00 
    <!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.

    0 讨论(0)
  • 后悔当初
    2020-12-13 20:02

    Just chiming in many months later. Centering a div of unknown width is a common problem, so you might want to create a re-usable solution.

    HTML that wraps a div of unknown width that you'd like to center:

    <div class="centered-block-outer">
 <div class="centered-block-middle">
  <div class="centered-block-inner">

   <!-- div that you'd like to center goes here -->

  </div>
 </div>
</div>

    CSS:

     /* To center a block-level element of unknown width */
 .centered-block-outer { 
   overflow: hidden;
   position: relative;/* ie7 needs position:relative here*/
 }
.centered-block-middle {
  float: left;
  position:relative;
  left:50%;
}
.centered-block-inner {
  position:relative;
  left:-50%;
}

    The reason why this works is explained here: http://www.tightcss.com/centering/center_variable_width.htm

    The annoying part is that you have to create THREE divs to get this to work - css really ought to provide a better way. But the good part is this solution works across browsers and across your site.

    Good luck!

    0 讨论(0)
  • 礼貌的吻别
    2020-12-13 20:03

    The only way I know of to do it without javascript would be to set your div to position:absolute and left:50%.

    0 讨论(0)
  • 清歌不尽
    2020-12-13 20:05

    I had to do this for a jQuery photo gallery... What I ended up doing was when a photo was selected, the current photo would fade out and the new picture would be loaded, then calculate the difference of the width of half the container minus half the width of the photo. I would then set margin-left (and margin-top vertically) with that value.

        thewidth = $('#thephoto').width();
    theheight = $('#thephoto').height();
    $('#thephoto').css("margin-top",250-(theheight/2));
    $('#thephoto').css("margin-left",287.5-(thewidth/2));
    $('#thephoto').fadeIn(300);

    This is where my Flash background really came in handy :)

    0 讨论(0)
 看不清?
提交回复
热议问题