Question

在以下测试页面中，有一个视频和一个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>

Answer 1

你需要将整个东西包装在一个包装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; }

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

Answer 2

如何将右侧的两个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周围添加一个容器div应该照顾它。

水平对齐由浮点移动的元素

2 个答案: