Cách căn giữa toàn bộ khối menu trong CSS

Không làm menu bằng thuộc tính display flex. Mà sẽ đặt thuộc tính display inline ở thẻ li, sau đó đặt thuộc tính display inline-block ở thẻ a.

Ví dụ mình có file HTML như vầy:

<ul class="mainmenu">
    <li><a href="">Một</a></li>
    <li><a href="">Hai</a></li>
    <li><a href="">Ba</a></li>
    <li><a href="">Bốn</a></li>
    <li><a href="">Năm</a></li>
    <li><a href="">Sáu</a></li>
    <li><a href="">Bảy</a></li>
    <li><a href="">Tám</a></li>
    <li><a href="">Chín</a></li>
    <li><a href="">Mười</a></li>
</ul>

Giải thích:

– Thẻ ul: Danh sách.

– Thẻ li: Thành phần trong danh sách.

– Thả a: Link chèn trong chữ.

Và liên kết (link) với file css như vầy:


ul.mainmenu{
    text-align: center;
}

ul.mainmenu li{
    display:inline;
}

ul.mainmenu li a{
    display:inline-block;
}

– Ở thẻ ul lớp mainmenu (ul.mainmenu): Đặt thuộc tính là text-align và gán là center, để cho chữ căn giữa.

– Ở thẻ li trong thẻ ul lớp mainmenu (ul.mainmenu li): Đặt thuộc tính display và gán inline. Vì nếu không có thuộc tính display flex thì menu sẽ nằm dọc, nên mình dùng display inline để nó nằm trên cùng một hàng.

– Ở thẻ a trong thẻ li, trong thẻ ul lớp mainmenu (ul.mainmenu li a): Đặt thuộc tính là display và gán inline-block. Chỗ này đáng lẽ bạn chỉ cần gán inline để nó nằm ngang cùng một hàng là được, nhưng nếu không có block thì nó sẽ không hiểu thuộc tính paddding (trong hầu hết trường hợp làm menu sẽ xài padding).

Nên để inline-block có nghĩa là vừa nằm ngang cùng một hàng, và vừa hiểu padding luôn.

Author
Recent Posts

Trần Thành

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Leave a Comment Cancel reply