如何将3个div水平居中？

Question

我遇到了一个问题：

我想将3个div水平放置，但我没有做好。

有人可以帮忙吗？

我已经在css和html中搜索了很多关于属性的内容，但我无法应用于我正在做的事情。

使用正常缩放： http://i.imgur.com/ylk5pm2.png

我想要的： http://i.imgur.com/47kzlpv.png 代码：

    .container {
		width:100%;
		border-color: #FF0000; 
		border-style: solid; 
		border-width:medium;
		text-align:center;
		margin-bottom: 1%;
	}
	
	.menu_box_filtro{
		display:inline;
	}
	
	.conteudo_box_filtro{
		display:inline-block;
	}	
	

<div class="border_preta">
  <div class="menu_box_filtro">  				
    <div class="grid_10 border_brown conteudo_box_filtro">

    </div>
  </div>
  <div class="menu_box_filtro">    
    <div class="grid_63 border_brown conteudo_box_filtro">
      menu centro
    </div>
  </div>

  <div class="menu_box_filtro">
    <div class="grid_10 border_brown conteudo_box_filtro">
      menu direita
    </div> 
  </div>
</div>

Answer 1

以下是使用FlexBox的示例。

.container {
  width: 100%;
  border-color: #FF0000;
  border-style: solid;
  border-width: medium;
  display: flex;
  align-items: center;
}

.container>* {
  flex-grow: 1;
}

.menu_box.left {
  background-color: rgba(255, 0, 0, 0.5);
  height: 100px;
}

.menu_box.center {
  background-color: rgba(0, 255, 0, 0.5);
  height: 200px;
}

.menu_box.right {
  background-color: rgba(0, 0, 255, 0.5);
  height: 100px;
}

<div class="container">
  <div class="menu_box left">Left</div>
  <div class="menu_box center">Center</div>
  <div class="menu_box right">Right</div>
</div>

Answer 2

您可以查看以下链接。

Fiddle

meanwt<-tapply(mtc$wt , list(mtc$gear, mtc$vs), mean, na.rm=TRUE)
sd=tapply(mtc$wt , list(mtc$gear, mtc$vs), sd, na.rm=TRUE)

Answer 3

检查

.container{
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  background-color:#F0A202;
}

.group{
content:"";
display:table;
clear:both;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
 
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
  
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
 
}

<div class="container group">
  <div>
    <p>First<p>
  </div>

  <div>
    <p>Second<p>
  </div>

  <div>
    <p>Third<p>
  </div>
</div>