Danh Mục Bài Viết
Ok anh em. Tiếp theo chuyên mục học nhanh Css cùng Minacode. Bài viết này mình sẽ nói về khái niệm Inline-block và các cách để chúng ta có thể căn giữa một phần tử theo chiều ngang và chiều dọc như margin, text-align, float, padding, line-height và flexbox nhé! Nào Let's go thôi.
So với display: inline, điểm khác biệt chính là display: inline-block đó là cho phép đặt chiều rộng và chiều cao cho phần tử. Ngoài ra, với việc display: inline-block, border/padding trên và dưới được tôn trọng, nhưng với display: inline thì không.
So với display: block, điểm khác biệt chính là display: inline-block không thêm dấu ngắt dòng sau phần tử, do đó phần tử có thể nằm cạnh các phần tử khác.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Minacode|display</h1>
<h2>display: inline</h2>
<div>Kênh tự học lập trình miễn phí. <br><span class="a">Frontend</span> <span class="a">Backend</span> khai giảng khóa học. </div>
<h2>display: inline-block</h2>
<div>Kênh tự học lập trình miễn phí. <br> <span class="b">Frontend</span> <span class="b">Backend</span> khai giảng khóa học </div>
<h2>display: block</h2>
<div>Kênh tự học lập trình miễn phí.<br> <span class="c">Frontend</span> <span class="c">Backend</span> khai giảng khóa học </div>
</body>
</html>Ta có:
Một cách sử dụng phổ biến của display: inline-block là hiển thị các mục danh sách theo chiều ngang thay vì theo chiều dọc. Ví dụ sau tạo liên kết điều hướng ngang:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Link điều hướng theo chiều ngang</h1>
<p>Lưu ý: Nếu bạn thay đổi kích cỡ màn hình, các link sẽ tự động xuống dòng nếu chiều rộng không đủ.</p>
<ul class="nav">
<li><a href="#home">Trang chủ</a></li>
<li><a href="#about">Giới thiệu</a></li>
<li><a href="#clients">Dịch vụ</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>
</body>
</html>Ta có:
Để căn giữa theo chiều ngang một phần tử khối (như <div>), hãy sử dụng margin: auto. Việc đặt chiều rộng của phần tử sẽ ngăn nó kéo dài ra các cạnh của vùng chứa nó. Phần tử sau đó sẽ chiếm chiều rộng được chỉ định và khoảng trống còn lại sẽ được chia đều cho hai lề:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Căn giữa một Elements</h2>
<div class="center">
<p>Minacode!</p>
</div>
</body>
</html>Ta có:
Lưu ý: Căn giữa không có hiệu lực nếu thuộc tính width không được đặt (hoặc được đặt thành 100%).
Để căn giữa văn bản bên trong một phần tử, hãy sử dụng text-align: center;
.center {
text-align: center;
border: 3px solid green;
}Để căn giữa hình ảnh, đặt lề trái và phải auto và biến nó thành một phần tử block:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Minacode đâu rồi?</h2>
<div class="right">
<p>Minacode đây. tôi có position: absolute nên được để right: 0px; </p>
</div>
</body>
</html>Ta có:
Một phương pháp khác để căn chỉnh các phần tử là sử dụng thuộc tính float:
Các bạn xem thêm:
paddingCó nhiều cách để căn giữa một phần tử theo chiều dọc trong Css. Một giải pháp đơn giản là sử dụng padding top và Bottom :
.center {
padding: 70px 0;
border: 3px solid green;
}Để căn giữa cả theo chiều dọc và chiều ngang, hãy sử dụng padding và text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}Một cách khác để Căn giữa theo chiều dọc là sử dụng thuộc tính line-height có giá trị bằng thuộc tính height:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Căn giữa theo chiều dọc với line-height</h2>
<div class="center">
<div>div được căn giữa theo chiều ngang và chiều dọc.</div>
</div>
</body>
</html>Ta có:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Miancode|Căn giữa với position và transform</h2>
<div class="center">
<p>văn bản này được căn giữa theo chiều ngang và dọc bằng việc kết hợp position và transform .</p>
</div>
</body>
</html>Ta có:
Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ. Chỉ cần lưu ý rằng flexbox không được hỗ trợ trong IE10 và các phiên bản cũ hơn:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Minacode|Căn giữa với Flexbox</h2>
<div class="center">
<p>Văn bản này được căn giữa bằng flexbox.</p>
</div>
</body>
</html>Ta có:
>>Còn tiếp>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
