วิธีการจัดตั้งลิสต์ตั้งตรงกลาง

เรียนรู้ว่าเช่นไรที่จะจัดตั้งลิสต์ตั้งตรงกลางด้วย CSS。

ลิสต์ตั้งตรงกลาง

  • กาแฟ
  • ชา
  • โคล่า

จัดตั้งลิสต์ HTML ตั้งตรงกลาง

ขั้นที่ 1 - เพิ่ม HTML:

จัดตั้ง <ul> ตัวเลือกภายในอีเลเมนต์เครื่องงาน ตัวอย่างเช่น <div>

<div class="container">
  <ul class="myUL">
    <li>กาแฟ</li>
    <li>ชา</li>
    <li>โคล่า</li>
  </ul>
</div>

ขั้นที่ 2 - เพิ่ม CSS:

จัดตั้ง <div> ตัวเลือกภายในแอลลี่ยูเอ็ม ตั้งตรงกลาง และ <ul> แปลงการแสดงของ inline-block

หรือ คุณสามารถจัดลำดับข้อความซ้ายเศษเพื่อให้มีมุมมองที่สะอาดขึ้น:

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

亲自试一试

相关页面

教程:CSS 对齐