将div容器居中,不设置宽度

Question

我试图以反应为中心.但是如果不设置宽度我就无法做到......

<div class="wrapper">
    <div class="container">
        <div class="left box">Content</div>
        <div class="right box">Content</div>
    </div>
</div>

.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:69%;max-width:350px; background:blue}
.right {width:29%;max-width:150px; background:red}
.box {float:left;padding:20px}

我怎样才能保持.container在中间？

演示:http://jsfiddle.net/z9zydnwL/

Answer 1

Flexbox甚至可以让浮动儿童居中!

所以,我可以简单地添加display:flex,并justify-content: center;在容器

.container {
    margin: 10px auto;
    display:flex;
    justify-content: center; /* align horizontal */
}

小提琴

这几天浏览器支持也不错

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  /* align horizontal */
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  float: left;
  padding: 20px
}

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

Answer 2

一种解决方案是使用内联块替换float:

.wrapper {
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

Answer 3

我认为你应该使用下面的CSS

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

<div class="wrapper">
    <div class="container">
        <div class="left box">Content</div>
        <div class="right box">Content</div>
    </div>
</div>

Answer 4

是的,您可以根据需要在不使用宽​​度属性的情况下将div放在中心.

假设你有一些宽度可变的内容.如果它只是文本,你可能会逃脱text-align:center.但是说它是一个图像,并且该图像可能具有不同的尺寸.你如何一直把它放在页面上？

首先,将内容放在浮动的div中,因为浮动的div将收缩包裹内容.其次,将div包装在另一个浮动的div中.

现在这是好的部分.相对定位外部浮动(黄色)left:50%,使左边缘位于页面的中间.然后相对定位内部浮动(红色)left:-50%将其正好向左移动黄色div的宽度的1/2,使其居中.请注意,黄色div和红色div的宽度完全相同,因为黄色也是一个浮点数,因此它会收缩包裹以适应红色.

包括背景颜色和高度,以明确发生了什么.通常,黄色div没有高度规格,也没有填充,并将设置为您的背景颜色.红色div是我们试图集中的那个.

有关参考,请访问http://www.tightcss.com/centering/center_variable_width.htm链接

示例示例以说明其工作原理

    .container
    	{
    		float: left;
            position: relative;
            left: 50%;
            padding-top: 10px;
    	}
    	.center {
            float: left;
            position: relative;
            left: -50%;
            background: red;

    }

    <div class="main_container">
    	<div class="container">
      		<div class="center">sample content</div>
      		<div style="clear:both;"> </div>
    	</div>
        <div class="clear"> </div>
    </div>

Answer 5

您正在使用填充值.box.因此,左右框宽度也不合适.尝试减小宽度值然后它必须工作:

.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:67%;max-width:350px; background:blue}
.right {width:27%;max-width:150px; background:red}
.box {float:left;padding:20px}