1

これは奇妙に聞こえるかもしれませんが、私の div を調整する CSS がいくつかあります。ある場所では、画像を中央に配置するhttp://www.brunildo.org/test/img_center.htmlも使用しています。

これがいっぱいになった場合、大きなdiv内のdivが別の行に移動するようになりました。float: left が答えのようです。問題は、それが私のフォーマットを台無しにすることです。上記のリンクに解決策を含めます。私はこのテストコードを持っています。幅とフロートを削除すると、スペースを取りすぎて別の行に移動しない場合を除いて、問題なく見えます。

私は、フロートをouterdivで使用して、画像を中央に配置できると考えていました。しかし float: left はまだそれを壊しています。フロートを削除して各 div が左に移動する方法があることを願っていますが、中央の div は正しく書式設定を壊しません。

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background: blue;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

<div class="c">
<div>

<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>

</div></div></div>
4

1 に答える 1

0

通常の olddisplay:inlineは、画像自体 (またはコンテナー div) で使用できます。これにより、囲んでいる div の幅に応じて、項目が複数の行に流れます。

最上位の div を中央に配置するにmargin: 0 autoは、(親に幅がある場合) または<center>そうでない場合は古き良きタグを実行する必要があります。

于 2010-03-20T08:57:58.003 に答える