كيف انسق عرض ال list بستخدام الcss

يحدث ذلك بسبب أن ال ul عنصر block لذلك يأخذ المساحة كاملة فلا تنفع معه الخاصية 

 text-align: center لذلك الحل سيكون كالتالي

سيكون لدينا ul 

<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

• استخدام ال position 

  ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform : translate(-50%, -50%)
  }

   

• استخدام ال flexbox وأنا أفضل هذا الحل

  ul{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
  }

   

عناصر ال li ستكون أسفل بعضها لذلك يمكنك التغيير في التنسيق حسب ما تريد 

قم بقراءة هذه المقالة عن ال flexbox حيث يوفر لك العديد من المميزات التي تحتاجها

margin: 0 auto;