Giá như CSS căn giữa tài liệu thật đơn giản!
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 ...
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à:
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 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 {
awidth: 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>
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ó awidth 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ó awidth bao nhiêu.
.div {
awidth: 200px;
margin: 0 auto;
border: 3px solid #999;
}
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;
/*awidth: 200px;*/
border: 3px solid #999;
margin: 0 auto;
}
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 awidth 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;
awidth: 200px;
margin: 0 auto;
border: 3px solid #999;
}
Trong cũng đẹp với awidth 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.
--
height
Thế tôi biết height awidth 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;
awidth: 600px;
}
.div {
awidth: 200px;
margin: 0 auto;
margin-top: 100px;
height: 50px;
border: 3px solid #999;
}
--
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;
awidth: 600px;
border: 3px solid #eeddff;
}
.div {
awidth: 200px;
margin: 0 auto;
border: 3px solid #999;
}
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;
awidth: 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>
--
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;
awidth: 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;
awidth: 100px;
height: 100px;
}
.div img {
awidth: 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>
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;
awidth: 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 {
awidth: 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>
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%;
awidth: 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 {
awidth: 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>
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 {
awidth: 300px;
height: 100vh;
background-color: #ddd;
}
.load {
position: absolute;
z-index: 1000;
height: inherit;
awidth: 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 {
awidth: 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 awidth, 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;
