将3个箱子集中起来

Question

我用css + html -> http://i.imgur.com/6kTAuuI.png制作了这个3盒

代码：

                <div class="row">
                    <div class=".col-md-6">
                        <div class="box">OPEN BAR + DRINKING GAMES</div><span></span>
                        <div class="box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div><span></span>
                        <div class="box">CONHECER PESSOAS</div><span></span>
                    </div>
                </div>


#about .box {
  background-color: transparent;
  border: 1px solid white;
  width: 250px;
  height: 350px;
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 20px;
}

我想知道为什么中间的盒子比其他的要高。

更新：

知道我使用的是正确的网格系统：

                <div class="row">
                     <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
                     <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
                     <div class="col-md-4 box">CONHECER PESSOAS</div>
                 </div>

和

#about .box {
  background-color: transparent;
  border: 1px solid white;
  width: 250px;
  height: 350px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 140px;
}

但它还没有集中起来

-> http://i.imgur.com/mc99Oxo.png

Answer 1

如果显示:内联块，则框将垂直对齐到基线。有关进一步信息，请参见http://quirksmode.org/css/css2/display.html#inlineblock。

从您的代码来看，我猜您正在使用引导程序。使用引导网格：

           <div class="row">
                <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
                <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
                <div class="col-md-4 box">CONHECER PESSOAS</div>
            </div>

.box {
  background-color: transparent;
  border: 1px solid white;
  height: 350px;
  margin-top: 50px;
  margin-bottom: 50px;
}

更新：

将您的.row div包装到另一个带有类“容器”的目录中，以便对其进行居中。有关更多信息，请阅读引导文档：http://getbootstrap.com/css/#grid