كيفية تمراكز القائمة

تعلم كيفية استخدام CSS لوضع القوائم في منتصف الخط.

ضع قائمة HTML في منتصف الخط

الخطوة الأولى - إضافة HTML:

ضع <ul> العناصر تُوضع داخل عنصر الحاوية، مثل <div>：

<div class="container">
  <ul class="myUL">
    <li>قهوة</li>
    <li>شاي</li>
    <li>كولا</li>
  </ul>
</div>

الخطوة الثانية - إضافة CSS:

ضع <div> العناصر تُوضع في منتصف الخط، و <ul> العرض يتم تحويله إلى inline-block。

أو، يمكنك أن تقوم بجعل عناصر القائمة ميلًا يسارًا للحصول على رؤية أكثر نظافة:

div.container {
  text-align: center;
{}
ul.myUL {
  display: inline-block;
  text-align: left;
{}

تجربة شخصية

الصفحات ذات الصلة

دليل:تحجيم CSS