Question

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

摩天大楼应始终尽可能远离SWF（右/左）。我怎么能这样做？

我在3个div上使用“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

<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 2

尝试以下操作：浮动摩天大楼，然后将SWF居中。这里的尺寸只是一个例子。互动小提琴：http://jsfiddle.net/0eL6dwgx/2/

<强> HTML

<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 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何水平居中DIV并将其他两个对齐到两侧

3 个答案: