如何水平地将一个DIV中心，并使另外两个方向对齐

Question

我想把一个SWF文件集中在两个摩天大楼之间。

摩天大楼应尽可能远离SWF (左右)。我该怎么做？

我在3div上使用"float:left“，但是我不能把SWF中心放在中心，摩天大楼离SWF非常近。

这就是我要做的：

<div style="width:100%">
 <div style="float:left">Banner 1 goes here</div>
 <div style="float:left">SWF file goes here</div>
 <div style="float:left">Banner 2 goes here</div>
</div>

SWF是一个在线游戏，所以我希望横幅尽可能远，用户的屏幕允许。

谢谢!

Answer 1

试一试:让你的摩天大楼浮起来，然后把你的主权财富放在中心。这里的尺寸只是一个例子。交互式小提琴：http://jsfiddle.net/0eL6dwgx/2/

<div id="wrap">
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="center">center</div>
</div>

CSS

#wrap {
  width: 600px;
  overflow: hidden;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
}
#right {
  float: right;
  width: 100px;
  height: 400px;
}
#center {
  width: 300px;
  height: 200px;
  margin: 0 auto;
}

Answer 2

<style type="text/css">
div{border:1px solid black;}
</style>

<div style="display:table;width:100%;">
<div style="display:table-row;">
<div style="display:table-cell;">1</div>
<div style="display:table-cell;">2</div>
<div style="display:table-cell;">3</div>
</div><!-- row -->
</div><!-- #container -->

http://jsfiddle.net/scott88/rgqnnm32/

Answer 3

您可以在父母身上使用display: table;，在孩子身上使用display: table-cell;：

​

#cont {
  display: table;
}
.skyscrapers {
  width: 160px;
  height: 100%;
  background: green;
  display: table-cell;
}
.swf {
  width: 1019px;
  display: table-cell;
  text-align: center;
}

<div id="cont" style="width:100%">
  <div class="skyscrapers">Banner 1 goes here</div>
  <div class="swf">SWF file goes here</div>
  <div class="skyscrapers">Banner 2 goes here</div>
</div>

​