طريقة CSS إلى الجدول محاذاة أفقيا

StackOverflow https://stackoverflow.com/questions/301147

سؤال

وأريد أن أثبت جدول عرض ثابت في مركز نافذة المتصفح. الآن يمكنني استخدام 

<table width="200" align="center">

ولكن البصرية ستوديو 2008 يعطي إنذار على هذا السطر:

السمة "محاذاة" يعتبر عفا عليها الزمن. ينصح بناء أحدث.

وعلى غرار ما CSS يجب أن تنطبق على الجدول للحصول على نفس التخطيط؟

هل كانت مفيدة؟

المحلول

وستيفن هو الحق، في :

<اقتباس فقرة>   

وعلى طريقة "صحيحة" لتركز جدول باستخدام CSS. يجب المتصفحات مطابقة لمركز الجداول إذا هامش اليسار واليمين على قدم المساواة. "السيارات" إن أبسط طريقة لتحقيق ذلك هي لتعيين هامش اليسار واليمين لوهكذا، يمكن للمرء أن يكتب في ورقة نمط: 

table
{ 
    margin-left: auto;
    margin-right: auto;
}

ولكن المقالة المذكورة في بداية هذه الإجابة يعطيك كل وسيلة أخرى لتوسيط الجدول.

<اقتباس فقرة>   

وهناك المغلق أنيقة حل عبر متصفح:   هذا وتعمل في كل من MSIE 6 (المراوغات والمعايير)، موزيلا، أوبرا وحتى نتسكيب 4.x من دون تحديد أي الاعراض واضحة: 

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

نصائح أخرى

وجرب هذا: 

<table width="200" style="margin-left:auto;margin-right:auto">

وبسيط. سوف IE6 وفوق مركز بسعادة الجدول الخاص بك مع "هامش: 0 السيارات." إذا فقط على الصفحة تجعل في وضع "معايير". لجعل هذا يحدث تحتاج إلى تعريف نوع المستند صالح، مثل 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

أو 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
سوف

وصحيح، IE5.5 وأدناه لا تزال ترفض لتوسيط الجدول ولكن ربما يمكنك ان تعيش مع ذلك، خصوصا إذا كانت الصفحة لا تزال تعمل مع اليسار الجدول الانحياز. أعتقد أنه الآن المستخدمين من IE5.5 وتحت تستخدم إلى حد ما بعض المواقع غريبة المظهر - ولكن ما زالت هناك حاجة للتأكد من أن تلك الثغرات بصرية لا تجعل موقعك غير صالحة للاستعمال.

وسعيد الترميز!

وتحرير: آسف، أنا ربما ينبغي الإشارة إلى أن لا يكون لديك "الصارم" DOCTYPE للحصول على IE6 وتصل إلى "المعايير" واسطة التقديم. أدركت أنه قد يبدو أن الطريق من الأمثلة DOCTYPE نشرت لي أعلاه. على سبيل المثال، وهذا تعريف نوع المستند بالطبع يعمل على قدم المساواة: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

وعلى الرغم من أنه قد يكون بدعة في عالم اليوم - في الماضي كنت ستفعل رمز غير المغلق التالية. هذا وتعمل في كل شيء حتى وبما في ذلك متصفحات اليوم ولكن - كما قلت - هو بدعة في عالم اليوم: 

<center>
<table>
   ...
</table>
</center>

وما تحتاجه هو بعض طريقة لمعرفة الذي تريد توسيط الجدول وشخص يستخدم متصفح السن. ثم إدراج "<مركز>" أوامر حول الطاولة. على خلاف ذلك - استخدام المغلق

والمثير للدهشة - إذا كنت تريد أن تركز كل شيء في منطقة الجسم - يمكنك فقط استخدام معيار 

text-align: center;

الأمر المغلق وفي IE8 (على الأقل) أنه سيركز كل شيء على الصفحة بما في ذلك الجداول. 

style="text-align:center;"

و(على ما أظن)

وأو هل يمكن تجاهله، أنه لا يزال يعمل

وهذا يجب أن تعمل: 

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

وأنا مجرد تعلم هذا وما عملت أخيرا بالنسبة لي هو أن يجعل أول جدول مع ثلاثة صفوف. تعيين الهامش للصفوف اليسار واليمين إلى 50٪. ثم وضع صف واحد، جدول عرض ثابت داخل "بيانات الجدول" المركز "صف الجدول". 

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top