Layout trong CSS được dùng để kiểm soát luồng các phần tử bên trong một phần tử khác. Nó thiết lập vị trí của phần tử trên trang web. Vị trí của phần tử có thể được đặt bằng căn chỉnh ngang và dọc. Có nhiều cách để đặt vị trí của phần tử được liệt kê dưới đây:
Sử dụng thuộc tính Position:
Sử dụng thuộc tính `position` với giá trị `absolute` để căn trái và phải.
Cú pháp:
position: absolute;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng thuộc tính text-align:
Sử dụng thuộc tính `text-align` để thiết lập căn chỉnh ngang cho một phần tử. Thuộc tính `text-align` có thể được đặt thành `left`, `right` hoặc `center`.
Cú pháp:
text-align: center;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng thuộc tính float:
Sử dụng thuộc tính the `float` để thiết lập căn chỉnh của phần tử. Giá trị `float` có thể được đặt thành `left` hoặc `right`.
Cú pháp:
float: right;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
float: right;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng thuộc tính Padding theo chiều ngang:
Thuộc tính `padding` được dùng để thiết lập căn chỉnh phần tử theo chiều ngang. Nó sử dụng `padding` trái và phải.
Cú pháp:
padding: 0 100px;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
padding: 0 100px;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng thuộc tính Padding theo chiều dọc:
Thuộc tính `padding` được dùng để thiết lập căn chỉnh phần tử theo chiều dọc. Nó sử dụng `padding` trên và dưới.
Cú pháp:
padding: 15px 0;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
padding: 15px 0;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Thuộc tính Line height:
`Line height` được dùng để thiết lập căn chỉnh theo chiều dọc.
Cú pháp:
line-height: 40px;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
line-height: 40px;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng thuộc tính margin:
Thuộc tính `margin` được dùng để thiết lập `auto` và căn chỉnh ngang một phần tử khối.
Cú pháp:
margin: auto;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
margin: auto;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng Clearfix:
Nếu bất kỳ phần tử nào cao hơn phần tử cha và nó được `float`, nó sẽ tràn ra ngoài. Overflow được đặt thành `auto` để sửa lỗi này.
Cú pháp:
overflow: auto;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
Sử dụng transform và định vị:
Thuộc tính `transform` được dùng để biến đổi một phần tử so với phần tử cha. Nó kết hợp với thuộc tính `position` có giá trị `absolute`.
Cú pháp:
position: absolute;
transform: translate(X%, Y%);
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
position: absolute;
transform: translate(50%, 10%);
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Đầu ra:
