Centering CSS

Hôm nay, mình sẽ chia sẽ các bạn một chủ đề mà có lẽ không xa lạ lắm trong thế giới phát triển web đó là căn giữa trong css.

Khi làm việc với css chúng ta luôn có rất nhiều câu hỏi khi căn trật tự của layout: sao nó không ngay với bên trái, sao nó không căn giữa, sao trên dưới của nó không bằng nhau, text chổ này canh giữa đi, hình ảnh này lệch rồi v.v... thật là phiền phức đúng không?

Khi căn giữa thì 2 thuộc tính chúng ta cần quan tâm nhất đó là Text và element(các đối tượng: img icon load, các thẻ div,span ...)

Canh giữa trái phải

Cái này cho đơn giản nè chỉ cần text-align: center là xong !

  <style type="text/css">
    .center {
      text-align: center;
      border: 3px solid #eeddff;
    }
    .div {
      awidth: 200px;
      border: 3px solid #999;
    }
  </style>
  <div class="container">
    <div class="center">
      Text cần canh giữa
      <br />
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" />
      <br />
      <div class="div">
        Thẻ div nè nha
      </div>
   </div>

và kết quả sẽ trông như thế này:

Các bạn có đặt câu hỏi sao div nó không căn giữa không? tại vì tag div có thuộc tính mặc định là display: block rồi nên thuộc tính **text-align: center **không có tác dùng gì đâu.

Với trường hợp này chúng ta có nhiều cách để cho thuộc tính div nằm giữa

Cách 1: xác định awidth của div và kém theo thuộc tính margin: 0 auto or margin: left + margin: right. Tùy bạn sử sử dụng