Question

我有这个HTML：

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

这附带了这个CSS：

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

我希望周围的div能够收缩包装到其内容中。我可以使用float: ...或display: inline-block来实现这一目标。但是，我也希望它使用margin: auto在页面上居中。这两种方法似乎不兼容。

是否可以创建这样一个收缩包装的居中容器，而无需添加包装元素？

编辑：

jsFiddle here

Answer 1

<!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>

简单的解释是.. display:table;导致它在现代浏览器中收缩包装，这是在现代浏览器中使用margin：0 auto; 来集中无宽度块级别的唯一方法。

在IE中，使用父元素在收缩包装的display:inline块级元素上设置text-align：center。

对于浮动，它只使用容器进行IE的50％数学运算。

Answer 2

几个月后才开始吵闹。将未知宽度的div居中是一个常见问题，因此您可能需要创建一个可重复使用的解决方案。

包含您想要居中的未知宽度div的HTML：

<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%;
}

此处解释了其工作原因：http://www.tightcss.com/centering/center_variable_width.htm

令人讨厌的部分是你必须创建三个div才能使它工作 - css真的应该提供更好的方法。但最重要的是，此解决方案适用于浏览器和整个网站。

祝你好运！

Answer 3

div标签似乎不起作用;但是，span标签会缩小以适应。希望代码解释自己。我还添加了一些对齐方式。

<html>
    <head>
        <title>TEST!</title>
        <style type="text/css"> 
            .object-box-wrapper{width:100%;text-align:center;}
            .object-box {
                border: 1px solid;
                text-align:left;
            }
        </style>
    </head>
    <body>
        <div class="object-box-wrapper">
            <span class="object-box">
                <span class="caption">This is the caption</span>
            </span>
        </div>
    </body>
</html>

Answer 4

CSS现在有一种称为 flex 布局的东西，到目前为止我的使用有限，它的效果非常好。

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

尝试以下几点：

<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>

Answer 5

这个应该有用的东西

HTML：

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

和CSS：

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

...唯一可悲的是，当使用绝对位置时，msgbox元素会阻止点击它（但这只是一个相关的问题，可能不适合你）

Answer 6

我知道没有javascript的唯一方法就是将div设置为position:absolute和left:50%。

Answer 7

我必须为jQuery照片库做这个......我最终做的是当选择一张照片时，当前照片会淡出并且新照片会被加载，然后计算宽度的差异容器的一半减去照片宽度的一半。然后我会用该值设置margin-left（和margin-top垂直）。

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

这是我的Flash背景真正派上用场的地方：）

如何在CSS中居中一个未知宽度的盒子？

编辑：

7 个答案: