چگونه لیست را در وسط قرار دهیم

آموزش نحوه استفاده از 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 {
  justify-content: center;
{}
ul.myUL {
  display: flex;
  justify-content: start;
{}

آزمایش کنید

صفحات مرتبط

آموزش‌ها:هماهنگی CSS