Question

我想将三个DIV盒水平放置并居中。如果我调整大小（更窄），浏览器框应垂直并居中。

---- ----- BrowserWide

的的 __ _ ___ XXX 的 _ < / EM> __ _ __

---- ----- BrowserWide

---- ----- BrowserNarrow

的的 __ _ __ _ __ X _ __ _ __ _ __

的的 __ _ __ _ __ X _ __ _ __ _ __

的的 __ _ __ _ __ X _ __ _ __ _ __

---- ----- BrowserNarrow

这是我的HTML：

<div class="premium_features"> <div class="premium1"> <h2>Some Heading</h2> <p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph, </p> </div> <div class="premium2"> <h2>Some Heading</h2> <p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph, </p> </div> <div class="premium3"> <h2>Some Heading</h2> <p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph, </p> </div> </div>

这是我的css：

.premium1 { background: url("4.png") no-repeat top center; padding-top: 95px; float:left; width: 33%; min-width: 300px; max-width: 320px; text-align:center; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .premium2 { background: url("5.png") no-repeat top center; padding-top: 95px; float:left; padding-top: 95px; float:left; width: 33%; min-width: 300px; max-width: 320px; text-align:center; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .premium3 { background: url("6.png") no-repeat top center; padding-top: 95px; float:left; width: 33%; height: 100px; min-width: 300px; max-width: 320px; text-align:center; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .premium_features { width: 75%; margin-left: auto; margin-right: auto; }

使用此代码：当它很宽并且很窄时可以。但在调整大小时，3个盒子中的2个盒子会在同一个区域停留一段时间。我需要在resizig开始时对它们进行垂直排序。

感谢您的帮助。

Answer 1

有许多方法可以集中元素：

保证金方式：

设置宽度或显示：inline-block;你可以使用：

margin-left: auto;
margin-right: auto;

text-align方式：

设置宽度或显示：inline-block;您可以将其添加到父级：

text-align: center;

绝对方式：

position: absolute;
left: 50%;
margin-left: width/2;

或

position: absolute;
left: 50%;
transform: translate(0, -50%);

也不要过于担心ie7及以下，因为大多数人使用更高版本的ie或不同的浏览器虽然这应该工作直到ie6

Answer 2

将你的三个div放在一个大div中并设置div格式

#largeDiv{ margin : 0 auto 0;}

Answer 3

我认为这就是你的意思：

<强> HTML：

<div id="longone">long one</div>
<center>
<div id="box"><img src="http://placehold.it/100x100"></div>
<div id="box"><img src="http://placehold.it/100x100"></div>
<div id="box"><img src="http://placehold.it/100x100"></div>
</center>

<强> CSS：

#longone
{
    display: block;
    width: 100%;
    border-bottom: 1px solid black;
}

#box
{
    display: inline-block;
    width: 100px;

}

http://jsfiddle.net/R9ENg/

虽然，我个人使用<ul>和<li> s。

Answer 4

你在找这样的东西吗？

http://jsfiddle.net/a2cPu/

<强> HTML

<div class="container-wrapper">
    <div class="container-1"></div>
    <div class="container-2"></div>
    <div class="container-3"></div>
</div>

<强> CSS

.container-wrapper {
    text-align:center;
}
.container-1, .container-2, .container-3 {
    width:200px;
    height:200px;
    display:inline-block;
    margin-left:-4px;
}
.container-1 {
    background:red;
    margin-left:0;
}
.container-2 {
    background:green;
}
.container-3 {
    background:blue;
}
@media all and (max-width: 650px) {
    .container-1, .container-2, .container-3 {
        width:100%;
        display:block;
        margin:0;
    }
}

Answer 5

您可以使用mediaqueries和测试screenwidth来应用不同的样式：示例mediaquerie + display:flex;

演示：http://codepen.io/anon/pen/qmFlt/

    #container {
      display:flex;
      flex-direction:row;
      justify-content:center;
    }
    #container div {
      width:200px;
      height:100px;
      background:gray;
      margin:auto 1em;
    }
/* next block, @media, can be clone to set other media queries */
    @media only screen 
    and (max-width : 800px) {/* under 800px width , this CSS is overriding precedent rules */
      #container {
      flex-direction:column;
    }
      #container div {
        margin:1em auto;
    }

<div id = "container">
  <div>box
  </div>
  <div>box
  </div>
  <div>box
  </div>
</div>

您可以设置display:inline-block / block #container div并删除display flex的{{1}}规则，保留3 div的边距。

演示：http://codepen.io/anon/pen/utflx/

将三个DIV盒水平放置并居中放置

5 个答案: