CSS - كيفية تحديد المركز أفقيًا من هو الموقف المطلق

Question

لدي 5 صفحات HTML مع نفس الرمز. قل هذا هو الرمز:

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

تربط جميع الصفحات الخمسة بنفس ملف CSS الخارجي وهو هذا فقط:

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

في كل صفحات من الصفحات الخمس ، أدخلت طاولة ، مثل ذلك

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

يحتوي الجدول على صف واحد فقط. في الصف الأول ، أحتاج إلى اختيار رقم عشوائي من 1-10 ، وهذا هو عدد TD الذي سيحصل عليه الصف. لذا ، يمكن أن تحتوي صفحة HTML الأولى على 2 TD ، والثانية يمكن أن تحتوي على 6TD ، وما إلى ذلك. أحتاج إلى صنعه بحيث يكون الموضع الرأسي للجدول هو نفسه في جميع الصفحات ولكن يجب أن يكون الجدول محاذاة أفقياً. لا بد لي من استخدام الموضع المطلق لأن المستخدمين الآخرين قد يكتبون بضع فقرات قبل الجدول على بعض الصفحات ، وعلى بعض الصفحات ، قد لا تكون هناك أي فقرات إضافية ، لذلك لكي أحصل على نفس الموضع الرأسي للجدول ، أحتاج الموقف المطلق. كيف يمكنني صنعه حتى يتمركز كل طاولة أفقيًا؟ من خلال المحاذاة أفقياً ، أعني أن كل طاولة لديها كمية متساوية من المساحة البيضاء على اليسار واليمين بغض النظر عن عدد طاولة TD.

margin: 0 auto;

لا يعمل بالنسبة لي. لاحظ أنني لا أستخدم CSS3 وأنا أستخدم IE8.

Answer 1

margin: 0 auto لن تعمل على العناصر المطلقة في وضعها. ما عليك القيام به هو الموقف المطلق في الوسط. أنت تنجز هذا عن طريق تحريكه ترك 50 ٪ ؛ ثم تعديل الهامش الأيسر إلى النصف السلبي من عرض العناصر

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

هذا سوف يركز عليها في منتصف والديها

ملاحظة. تأكد من ضبط موضع الحاويات الأصل على النسبية

http://jsfiddle.net/s7gmm/3/