0

重複していると思うかもしれませんが、画像ではなくテーブルについて話しているので、そうは思いません!

以下のコードを使用して、水平方向と垂直方向に div の中央にテーブルを設定しようとしました。コードは画像に対しては正常に機能しますが、画像の代わりにテーブルを配置すると、テーブルが表示されず、スパンサイズが 100% になり、テーブルが div の中心ではなく div の下に表示されます。

コード:

<style>
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:155px;
    height: 160px;
    background-color:#999;
    display: block;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}

</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->
<div class="wraptocenter">
    <span></span>
    <table border="1" width=" 70%">
        <tr height="10px">
            <td width="10px" height="10px"></td>
            <td width="10px" height="10px"></td>
        </tr>
        <tr height="10px">
            <td height="10px"></td>
            <td height="10px"></td>
        </tr>
    </table>
</div>

画像を配置すると、すべてが正常に機能しますが、テーブルの場合はそうではありません!

4

1 に答える 1

1

http://jsfiddle.net/FW2Af/を参照してください

コードはdisplay:inline-block、画像などの要素のみを中央に配置します。しかし、テーブルにはdisplay:table.

div次に、テーブルを含む を作成して解決できdisplay:inline-blockます。

テーブルの幅を wraptocenter の幅の 70% にしたい場合:

  • width:100%テーブルにセット
  • width:70%コンテナにセットしdivます。

さらに、width="10px"一番上のセルがあります。テーブルの幅が 70% の場合、それはナンセンスです。

編集：

IE 7 (およびそれ以前) 用に修正しましdisplay:inline-blockた。ブロックである要素に設定すると、引き続きブロックであるため、次のように設定diplay:inlineする必要がありますdisplay:inline-block。

<!--[if lt IE 8]><style>
.wraptocenter>div{
    display:inline;
}
</style><![endif]-->

<span>また、一部のブラウザではと の間の空白<div>が表示されるため、テーブルが完全に中央に配置されません。

解決策は次のとおりです。

.wraptocenter {
    font-size:0;
}
.wraptocenter>div{
    font-size:16px; /* Or whatever you want */
}

(フォント: https://stackoverflow.com/a/8902198/1529630、この場合、フローティングを使用するとセンタリングが壊れるため、これは素晴らしいアイデアです)

こちらをご覧ください：http://jsfiddle.net/FW2Af/2/

編集3：

あなたはIE 8では何も表示されないと言います。私にとっては機能しますが、黒い境界線ではなく、白い境界線です。ここで修正: http://jsfiddle.net/FW2Af/3/

.wraptocenter td{
    border:1px solid black;
}
于 2012-08-25T23:10:22.620 に答える