0

在下面的测试页面中，有一个视频和一个 iframe 元素，都具有margin-left: auto; margin-right: auto;CSS 样式。
视频元素向右移动了一个float: left;包含几行文本的元素，因此它与下部 iframe 未对齐。

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

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

2 回答 2

2

您需要将整个内容包装在包装器 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-05T19:29:09.580 回答
1

如何将右侧的两个 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 都应该处理好它。

于 2012-10-05T15:50:40.367 回答