Căn giữa với CSS

Căn giữa phần tử là khái niệm căn bản trong thiết kế web, tuy nhiên trong một số trường hợp thì không phải lúc nào điều này cũng dễ dàng. Vì thế bài viết này tôi muốn giới thiệu với các bạn một số mẹo nhỏ giúp căn giữa phần tử với CSS.

Căn giữa phần tử display:block

Ta căn giữa phần tử display:block bằng thuộc tính margin:auto trong css.

<body>

      <div class="main" style="width:960px; height:500px;"></div>

</body>

.main{

margin-left:auto;

margin-right:auto;

}

Hoặc đơn giản

.main{

margin:auto;

}

Căn giữa phần tử display:inline-block

Căn giữa display:inline-block như thế nào và tại sao phải dùng display:inline-block, tôi sẽ giải thích qua ví dụ dưới đây.

<body>

    <div class="main">

        <ul class="social">   

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

        </ul>

    </div>

</body>

Ở trên ta có thẻ ul giả sử sẽ chứa các icon tròn của mạng xã hội.

.main{

    background-color:#e1e1e1;

    width:960px;

    padding-top:50px;

    margin:auto;

    height:500px;

}

.social{

    height:40px;

}

.social a{

    float:left;

    display:block;

    width:40px;

    height:40px;

    background-color:#444;

    border-radius:40px;

    margin-left:5px;

    margin-right:5px;

}

Kết quả:

Tuy nhiên bây giờ ta căn giữa thẻ ul.social như hình dưới :

Do thẻ ul mặc định với display:block nên chiều rộng của nó sẽ kéo dài bằng thẻ main. Bây giờ ta để thẻ ul display:inline-block thì chiều rộng của nó sẽ co lại chỉ bằng chiều rộng của toàn bộ thẻ li bên trong nó (chú ý thêm giá trị display:inline cho thẻ li ).

.social{

    display:inline-block;

    height:40px;

}

.social li{

    display:inline;

}

Tuy nhiên với display:inline-block ta không thể dùng margin:auto để căn giữa cho nó được mà ở đây ta phải dùng thuộc tính text-align:center cho thẻ cha của nó ( ở vd trên thẻ cha là main ).

.main{

    text-align:center;

}

Căn giữa phần tử có position absolute hoặc fixed

Giả sử ta có một block chiều rộng 200px chiều dài 100px với position absolute hoặc fixed. Để căn giữa màn hình ta dùng code css sau:

<body>

     <div class="block">

     </div>

</body>

.block{

width:200px;

height:100px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-50px;

}

margin-left và margin-top sẽ mang giá trị âm và bằng một nửa chiều rộng và chiều dài của block.

Archive