3

同じコードの 5 つの HTML ページがあります。これがコードだとしましょう：

<div id='generic'>
</div>

5ページすべてが同じ外部CSSファイルにリンクしています。これは次のとおりです。

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

5 ページのそれぞれに、次のように表を挿入しました。

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

テーブルには 1 行しかありません。1 つの行では、1 から 10 までの乱数を選択する必要があり、それが行に含まれる td の数です。したがって、最初の html ページには 2 つの td を含めることができ、2 番目のページには 6td を含めることができます。テーブルの垂直位置がすべてのページで同じになるようにする必要がありますが、テーブルは水平方向に配置する必要があります。他のユーザーがいくつかのページでテーブルの前にいくつかの段落を入力する可能性があるため、絶対位置を使用する必要があり、一部のページでは追加の段落がない可能性があるため、テーブルの同じ垂直位置を得るには、必要です絶対位置。すべてのテーブルが水平方向に中央揃えになるようにするにはどうすればよいですか? 水平方向に揃えるとは、テーブルに含まれる td の数に関係なく、すべてのテーブルの左側と右側に均等な量の空白があることを意味します。

margin: 0 auto;

私にはうまくいきません。私は CSS3 を使用しておらず、IE8 を使用していることに注意してください。

4

1 に答える 1

4

margin: 0 auto絶対配置要素では機能しません。あなたがする必要があるのは、それを真ん中に絶対に配置することです。これを行うには、左に 50% 移動します。次に、左マージンを要素幅の負の半分に調整しました

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

これにより、親の中央に配置されます

ps。親コンテナの位置が相対的に設定されていることを確認してください

http://jsfiddle.net/s7Gmm/3/

于 2013-11-07T19:22:10.523 に答える