水平对齐通过浮动移位的元素

在以下测试页面中，有一个视频和iframe元素，均使用margin-left: auto; margin-right: auto; CSS样式。
视频元素向右移动一个包含几条文本行的float: left;元素，因此它与下面的iframe没有对齐。水平对齐通过浮动移位的元素

我希望iframe与视频集中对齐，将视频保留在当前位置。

http://s15.postimage.org/d2r7xx92j/image.png

<div style="float: left; border-right: thin solid;"> 
    A few colored entries here. 
</div> 


<div style="margin-left: auto; margin-right: auto;"> 
    <video src="..." 
    style="display: block; margin-left: auto; margin-right: auto;"> 
    </video> 
</div> 


<iframe src="..." style="width: 300px; height: 100px; 
display:block; margin-left: auto; margin-right: auto;"> 
</iframe>

来源

2012-10-05 davide

如何把两个div是在自己的div的，正确的，那么该浮动的权利和使用margin:auto（就像你有目前）到中心他们。这样的方式，而不是集中在页面上，他们集中在同一个div，并且一个不应该被推到比另一个浮动更远的另一个。

<div style="float: left; border-right: thin solid;"> 
    A few colored entries here. 
</div> 

<div style ="float:right;"> 
<div style="margin-left: auto; margin-right: auto;"> 
    <video src="..." 
    style="display: block; margin-left: auto; margin-right: auto;"> 
    </video> 
</div> 



<iframe src="..." style="width: 300px; height: 100px; 
display:block; margin-left: auto; margin-right: auto;"> 
</iframe> 
</div>

如果我误解，你不想这些浮动的权利，就忽略这个问题，并利用利润来代替。无论哪种方式添加围绕你想要集中在一起的容器div应该照顾它。

来源

2012-10-05 15:50:40 Jason

谢谢。我将视频和iframe绑定在没有CSS或属性的基本'div'中，但结果完全相同。但是，如果我将'style =“float：right;”'添加到这个'div'，视频和iframe通过它们的中心水平对齐，这是想要的结果，但是它们都被推到最右端，不管是否有余裕：汽车; margin-right：auto;'应用于这个'div'。 – davide

也许尝试使用这样的技巧？ http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/通过取出浮动物并以这种方式放置新的容器格，或者通过使用相同的方法将div放置在容器内部？ – Jason

这会起作用，但是在编写页面的HTML时，视频的大小不明。相反，我认为左边最上面的浮动'div'可以垂直延伸到无形的占据页面高度，所以右边的任何站点都有相同的水平限制。但是这样，与'div'（_border-right：thin solid; _）相关的小边框也会增长。 – davide

你需要将整个东西包装在一个包装div中。然后，您可以将两个div浮动到左侧，并仍然将内侧自动居中。

<div id="Wrapper"> 
    <div class="leftColumn">  
     A few colored entries here. 
    </div>  
    <div class="rightColumn"> 
     <div style="margin-left: auto; margin-right: auto;">  
      <video src="..."  style="display: block; margin-left: auto; margin-right: auto;">  </video> 
     </div>  

     <iframe src="..." style="width: 300px; height: 100px; display:block; margin-left: auto; margin-right: auto;"> 
     </iframe> 
    </div> 
</div> 

#Wrapper { overflow: hidden; } 
.leftColumn { float: left; border-right: thin solid; width: 200px; } 
.rightColumn { float: left; width: 800px; }

我没有测试代码，但它应该工作。

来源

2012-10-05 19:29:09 ZombieCode

我现在把整个事情放在一个表格中，来格式化它。但是我注意到你指定了固定宽度的两列（200和800像素）。当我写这个html的时候，我无法知道它们包含的元素的大小;视频和左侧的文本列表都是动态生成的，并在运行时插入到此html模板中。 – davide

您可以使用百分比或最小宽度（最小宽度:) – ZombieCode

水平对齐通过浮动移位的元素

回答

相关问题