Trong hướng dẫn CSS này, chúng ta sẽ xem xét cách căn giữa các phần tử văn bản và khối. Có một số thủ thuật bạn có thể sử dụng để căn giữa các phần tử theo chiều ngang và chiều dọc trong một bố cục.
Phần tử văn bản căn giữa
Để căn giữa văn bản bên trong phần tử lớn hơn, hãy sử dụng text-align: center; như được thấy bên dưới:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
.div-class {
text-align: center;
background-color: lightblue;
}
button {
width: 200px;
}
</style>
</head>
<body>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by text-align: center</p>
</div>
</body>
</html>
Phần tử khối căn chỉnh giữa:
Căn giữa các phần tử khối được minh họa tốt nhất bằng cách sử dụng <body> của một tài liệu HTML. Những gì bạn cần làm là kiểm soát chiều rộng của vùng chứa tổng thể và sau đó đặt lề thành tự động:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
</body>
</html>
Hình ảnh Căn giữa:
Để căn giữa một hình ảnh, trong bộ chọn CSS, hãy thay đổi màn hình của bạn thành khối và sau đó kiểm soát chiều rộng của phần tử hình ảnh, sử dụng % hoặc px . Đặt margin thành auto :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
Căn giữa theo chiều dọc và chiều ngang trong một đơn vị:
padding:
Để căn giữa theo chiều dọc trong một <div> , Có một số cách để làm điều đó. Đầu tiên, và có lẽ là dễ nhất, là điều chỉnh phần đệm trong <div> của bạn - sau đó bạn có thể sử dụng text-align: center để căn giữa đoạn văn theo chiều ngang:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
line-height:
Bạn cũng có thể đặt chiều cao dòng thành chiều cao của phần tử khối mà bạn đang căn giữa kết hợp với text-align:center để căn chỉnh phần tử vào giữa. Nếu bạn có nhiều dòng, hãy sử dụng chiều cao dòng cho cả dòng chính và dòng con và thêm vertical-align: middle và display: inline-block cho đứa trẻ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-lineheight {
line-height: 200px;
border: 5px double ivory;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="vertical-center-lineheight">
<p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.</p>
</div>
<div id="vertical-center-lh-multiple">
<p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block, and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. </p>
</div>
</body>
</html>
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
biến đổi:
Một cách khác bạn có thể căn giữa các phần tử là sử dụng vị trí và biến đổi. Đặt phần tử mẹ thành vị trí:tương đối, phần tử con thành vị trí tuyệt đối. Phần tử con sẽ cần được đặt ở trên cùng và bên trái ở mức 50% và sau đó chúng tôi sử dụng thuộc tính biến đổi để điều chỉnh văn bản trong div. Chúng tôi sẽ nói thêm về thuộc tính này trong một bài đăng khác nên sẽ ổn nếu hiện tại chưa rõ 100%:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-transform {
height: 200px;
position: relative;
border: 5px double ivory;
margin-bottom: 20px;
}
#vertical-center-transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="vertical-center-transform">
<p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT</strong> center aligned.</p>
</div>
</body>
</html>
flexbox:
Cuối cùng, chúng ta có thể căn giữa các phần tử bằng cách sử dụng flexbox. Đặt display:flex thành phần tử chính của phần con bạn muốn căn giữa và sau đó sử dụng align-items và justify-content để căn giữa nó:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-flexbox {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double ivory;
}
</style>
</head>
<body>
<div id="vertical-center-flexbox">
<p>I am vertically and horizontally centered in a div using flexbox.</p>
</div>
</body>
</html>
Đây là những cách phổ biến nhất mà bạn có thể giải quyết vấn đề căn giữa các yếu tố trong bố cục của mình.