Blog Cọng Phở

Blog tổng hợp - Cập nhật đa chiều

Làm sao để căn các thẻ li của menu ra giữa ?

Mặc định một số menu toàn là float left hoặc là right nhưng ít khi căn giữa, việc trang trí cho menu của web thêm sinh động thì căn ra giữa đang làm cho web sinh động hơn, nhiều bạn chưa hiểu rõ về css cho nên nay mình sẽ làm hướng dẫn cơ bản này để các bạn hiểu rõ hơn nhé



căn menu ra giữa


Ví dụ căn các thẻ li của menu ra giữa


<ul class="danhmuc">
  <li><a href="#">trang chủ</a></li>
  <li><a href="#">giới thiệu</a></li>
  <li><a href="#">Tin tức</a></li>
  <li><a href="#">Khách hàng</a></li>
  <li><a href="#">Liên hệ</a></li>
</ul>


bây giờ mình sẽ viết css như này nhé

.danhmuc{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}

Chú ý phần text-align:center; phải có để cho căn chữ ra giữa.
.danhmuc li{
    display:inline;
}
.danhmuc a{
    display:inline-block;
    padding:10px;
}


Chúc các bạn thành công