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

右側にある 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 を追加すると、それが処理されます。

于 2012-10-05T15:50:40.367 に答える