Giá như CSS căn giữa tài liệu thật đơn giản!
CSS3
53
tuds
22
White

tuds viết ngày 11/06/2016

Khi thiết kế 1 website vấn đề ngay hàng thẳng lối luôn được các sếp, các design cũng như các mợ tám đứng kế bên chém nhiều nhất.

Ví dụ: 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...

Hôm nay tôi xin chia sẽ một vài biện pháp mà chúng ta có thể căn chỉnh tài liệu "không sai 1 ly". Tôi tạm gọi nó là bắn trúng hồng tâm nhé.

Thường thì sẻ có 3 - 4 hay 5 cách nhĩ, chẳng nhớ nữa nhưng theo tôi chúng ta có 2 thứ cần căn giữa nhất đó là:

Textelement(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 nhưng bạn nên nhớ là còn các element như div mũi tên của bạn sẽ không bay trúng hồng tâm nếu bạn bắn theo kiểu text-align: center

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    .center {
      text-align: center;
      border: 3px solid #eeddff;
    }
    .div {
      width: 200px;
      border: 3px solid #999;
    }
  </style>
</head>
<body>
  <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>
  </div>
</body>
</html>

alt text

Vì sao thẻ class="div" không căn giữa, vì div luôn mang thuộc tính default là display: block nếu bạn muốn nó căn giữa bằng text-align vẫn được bạn chỉ cần đổi lại thuộc tính của nó là display: inline-blockor inline nhưng không nên làm thế vì nó có trong span em, b ... rồi bạn có thể xem thêm ở đây về chú display : https://css-tricks.com/almanac/properties/d/display/

Vậy để bắn cho nó ngay giữa 2 bên và không quan tâm nó sẽ lệch thì ta làm sao
margin: 0 auto; là sự lựa chọn hàng đầu của tôi.

Không quan tâm element bên ngoài có width là bao nhiêu, không quan tâm phải margin, padding bao nhiêu cho vừa, với chế độ auto tôi có thể bắn mũi tên bay chính xác trọng tâm trái phải mà chỉ cần quan tâm 1 điều là mũi tên của tôi phải to như thế nào thôi tức là có width bao nhiêu.

.div {
  width: 200px;
  margin: 0 auto;
  border: 3px solid #999;
}

alt text

Nếu bạn cố ép sử dụng display: inline-block or display: inline vẫn okay đó, nhưng bạn sẽ không kiểu soát được mũi tên của bạn khi text bên trong không thứ gì đó chứa bên trong mũi tên như lông chim, sắt, thanh gỗ, nó sẽ tràn lan ra hai bên đến khi nào đầy luôn cái bảng ngắm của bạn tức (body)

.div {
  display: inline-block;
  /*width: 200px;*/
  border: 3px solid #999;
  margin: 0 auto;
}

alt text

Như thế này thì nó cũng chẳng khác gì text-align: center lắm nhĩ.

--

Căn giữa trên dưới

Chúng ta đã biết cách bắn mũi tên một cách tự động trái phải mà nhắm mắt cũng trúng rồi, giờ là việc chúng ta bắn trúng con chim trên cây hay là đóng phân ở dưới đất.

Nếu biết là text thì em sẽ là line-height
Nếu biết là height thì em sẽ là margin or padding
Nếu biết là display: table thì em sẽ là vertical-align: middle
Nếu biết là căn giữa của full-screen thì em sẽ là position
Nếu ai biết nữa thì hát tiếp nhé: https://youtu.be/t6zJSFymVVM
Ngoại truyện: nếu là coder thì tôi sẽ code.

Line-height

Vậy nếu căn giữa trên dưới 1 đoạn text thì sao, lúc trước tôi hay chơi thằng line-height và ôi thôi, với 1 dòng text thì em đẹp lộng lẫy , lỡ đứa nào chơi thông minh, bóp width hoặc viết thiệt nhiều text, thế là bó tay, bắn trúng được 1 phát ở trọng tâm thôi, xuống dòng 1 phát là trúng ngay đóng phân.

.div {
  line-height: 8em;
  width: 200px;
  margin: 0 auto;
  border: 3px solid #999;
}

alt text

Trong cũng đẹp với width vừa đủ và text vừa khuôn, nhưng xin thưa cuộc thi bắn cung của chúng ta rất khắc nghiệt, có khi vừa bắt trồng chuối vừa bắn nữa, nên nếu ta xử lý cho 1 trường họp thế này thì bạn sẽ trả giá khá nhiều.

alt text

--

height

Thế tôi biết height width của nó thì sao? vẫn ổn nhưng bạn sẽ phải thế này nhé, canh margin padding lồi mắt ra có khi sử dụng cả -px, đôi khi có thêm line-height nữa rồi tính toán thêm thêm, bớt bớt px thay hồ thử sai luôn bắn tên tứ tung rồi mới biết được toạ độ chính xác.

.center {
  text-align: center;
  border: 3px solid #eeddff;
  height: 300px;
  width: 600px;
}
.div {
  width: 200px;
  margin: 0 auto;
  margin-top: 100px;
  height: 50px;
  border: 3px solid #999;
}

alt text

--

vertical-align: middle

Tiếp theo là kỹ thuật bắn cung vertical-align: middle của anh middle đến từ quận mi d d le.

.center {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  width: 600px;
  border: 3px solid #eeddff;
}
.div {
  width: 200px;
  margin: 0 auto;
  border: 3px solid #999;
}

alt text

Chẳng qua nó là thuộc tính default của table, còn được gọi theo kiểu biến div thành table cell bạn chịu khó view source code thì sẽ thấy khá rõ, hoặc anh bự bootstrap cũng có sử dụng thuộc tính này cho media object của ảnh
Link view: http://getbootstrap.com/components/#media

Nó giúp bạn căn chỉnh một cách gần như là hoàn hảo để không sai 1 ly ở trọng tâm. Text quá dài hay quá ngắn, hình ảnh, thẻ div v.v... nhưng phiền phức là bạn phải biết được đối tượng cần canh giữa.

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    .center {
      text-align: center;
      height: 200px;
      width: 600px;
      border: 3px solid #eeddff;
      display: table;
    }
    .div {
      border: 3px solid #999;
      display: table-cell;
      vertical-align: middle;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center">
      <div class="div">
        <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" />
      </div>
      <div class="div">
        Thẻ div nè nha Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo nulla harum fuga quidem assumenda, in ipsa, eius officiis aliquam, similique reprehenderit. At aut expedita totam odit omnis repellat reiciendis!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis nihil sed cum, alias quia, tempora magni ad cumque incidunt mollitia optio quasi? Tenetur reprehenderit unde architecto temporibus aut natus perspiciatis. X 3       
      </div>
    </div>
  </div>
</body>
</html>

alt text

--

Position

Position absolute với default top right bottom left điều = 0.

Css thiên biến vạn hoá, dùng nhiều kiểu độc lập cũng được và kết họp cũng okay, như cách kết họp này chẳng hạn:

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    .center {
      padding: 30px;
      width: 600px;
      border: 3px solid #eeddff;  
      text-align: center;
      height: 200px;
      position: relative;
    }
    .div {
      position: absolute;
      top: 50%;
      right: 0;
      bottom: 50%;
      left: 0;
      margin: auto;
      border: 3px solid #999;
      width: 100px;
      height: 100px;
    }
    .div img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center">
      <div class="div">
        <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" />
      </div>
    </div>
  </div>
</body>
</html>

alt text

Kiểu này thường dùng cho mấy cái load page full screen, nhưng bạn nên quan tâm đến kích thước của phần tử bên trong, để có thể canh chính xác.

Đọc tới được đây quả thật các bạn thật kiên nhẫn, nhưng các bạn hãy yên tâm khi tôi nói bắn cung trúng đích thật đơn giản với sự ra đời của Css3, đừng quên là nó còn chưa được hỗ trợ nhiều ở IE nhé.

display:box; - box-align:center; - box-pack:center;

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    .center {
      padding: 30px;
      width: 600px;
      border: 3px solid #eeddff;
      text-align: center;

      /* Firefox */
      display:-moz-box;
      -moz-box-align:center;
      -moz-box-pack:center;

      /* Safari and Chrome */
      display:-webkit-box;
      -webkit-box-align:center;
      -webkit-box-pack:center;

      /* W3C */
      display:box;
      box-align:center;
      box-pack:center;
    }
    .div {
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center">
      <div class="div">
        <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" />
        <br />
        Text nè nha Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis voluptatum modi, vero eius sequi illo sunt amet commodi dolores, laudantium vel. Quod aspernatur deleniti impedit eaque. Quasi officiis ipsa voluptate!
      </div>
    </div>
  </div>
</body>
</html>

alt text

Với 3 thuộc tính này sẽ khiến bạn đỡ khổ hơn rất nhiều với:
box-align canh theo chiều dọc còn box-back là canh theo chiều ngang.

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    .load {
      position: fixed;
      z-index: 1000;
      height: 100%;
      width: 100%;

      /* Firefox */
      display:-moz-box;
      -moz-box-align:center;
      -moz-box-pack:center;

      /* Safari and Chrome */
      display:-webkit-box;
      -webkit-box-align:center;
      -webkit-box-pack:center;

      /* W3C */
      display:box;
      box-align:center;
      box-pack:center;
    }
    .load img {
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="load">
    <img src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" alt="" />
  </div>
</body>
</html>

alt text

Nếu nó nằm trong 1 đối tượng khác như sidebar chẳng hạn, thì bạn cứ bắn cung thế này nhé:

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    .sidebar {
      width: 300px;
      height: 100vh;
      background-color: #ddd;
    }
    .load {
      position: absolute;
      z-index: 1000;
      height: inherit;
      width: inherit;

      /* Firefox */
      display:-moz-box;
      -moz-box-align:center;
      -moz-box-pack:center;

      /* Safari and Chrome */
      display:-webkit-box;
      -webkit-box-align:center;
      -webkit-box-pack:center;

      /* W3C */
      display:box;
      box-align:center;
      box-pack:center;
    }
    .load img {
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="load">
    <img src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" alt="" />
  </div>
  </div>
</body>
</html>

Link demo :

Điều quan trọng khi bắn bằng kỷ thuật này thì bạn nên quan tâm đến width, height, z-index, còn 3 thuộc tính còn lại bạn nên xem anh IE có chơi nữa không là okay nhé.

Tóm lại

Có rất nhiều cách để canh giữa một đối tượng, nhưng bạn nên xem xét thật kỹ khi chọn lựa một kỹ thuật nhất định để làm việc, tránh dư thừa và không đúng một đích.

Ý kiến của tôi:

Text thì line-height - vertical-align
Images thì position - vertical-align
All thì bộ ba display:box; box-align:center; box-pack:center;

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

34 bài viết.
105 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
54 12
0.1 Intro Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính t...
tuds viết hơn 2 năm trước
54 12
White
47 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết gần 2 năm trước
47 5
White
27 2
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw width. 1 vw = 1% c...
tuds viết hơn 2 năm trước
27 2
Bài viết liên quan
White
34 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết 3 năm trước
34 8
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết 3 năm trước
18 10
White
6 0
Chắc hẳn không ít các bạn khi code web thường hay cân nhắc việc sử dụng đơn vị như thế nào cho hợp lý mà lại hiệu quả. Nào là code trên desktop rồi...
Trần Anh Tuấn viết 1 tháng trước
6 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
105 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!