كيفية توسيط قائمة غير مرتبة بدون عنصر DIV الأصلي

في CSS، توسيط قائمة غير مرتبة (

) مع الحفاظ على اليسار- يمكن أن تشكل عناصر القائمة المحاذاة تحديًا دون استخدام div الأصلي. فيما يلي كيفية تحقيق هذا التأثير:

يستخدم مقتطف التعليمات البرمجية المقدم، مع div الأصلي، محاذاة النص: توسيط في div وعرض: كتلة مضمنة في ul لتوسيط القائمة. ومع ذلك، تتطلب هذه الطريقة غلاف div أصلي.

لتوسيط قائمة غير مرتبة بدون div أصلي، لا يمكن استخدام خصائص CSS مثل الهامش ومحاذاة النص بفعالية نظرًا لأن

ليس له عرض ثابت .

يكمن الحل في ضبط

ليكون بمثابة جدول باستخدام العرض: الجدول. يؤدي هذا إلى إنشاء بنية تشبه الجدول حيث يتم تعريف الصفوف بواسطة عناصر القائمة (
• ). من خلال تعيين هامش: 0 تلقائي على
  ، يتم توسيط الجدول (أي القائمة) ضمن العنصر الذي يحتوي عليه.

  إليك كود CSS الذي يحقق هذا التأثير:

  ul {
    display: table;
    margin: 0 auto;
  }

  للتوضيح، إليك مقتطف التعليمات البرمجية الذي يستخدم HTML المقدم ولكن بدون div الأصلي:

  
  
  
    
  
      
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    
  
  
  

  سيعمل هذا الرمز على توسيط القائمة غير المرتبة في الصفحة، مع الحفاظ على محاذاة عناصر القائمة إلى اليسار.