25. Align Trong CSS

Align trong CSS: thuộc tính align thường được sử dụng để căn chỉnh các phần tử theo chiều dọc hoặc chiều ngang trong một phạm vi cụ thể. Tuy nhiên, có nhiều thuộc tính align khác nhau, chẳng hạn như text-align, vertical-align, align-items, align-self và nhiều thuộc tính khác, mỗi thuộc tính có ý nghĩa và cách sử dụng riêng biệt.

Dưới đây là một ví dụ về cách sử dụng một số thuộc tính align khác nhau:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Align Example</title>
</head>
<body>
  <div class="container">
    <div class="box text-align-example">Text Alignment</div>
    <div class="box vertical-align-example">Vertical Alignment</div>
    <div class="box flex-align-example">
      <p>Flexbox Alignment</p>
      <p>Flexbox Alignment</p>
      <p>Flexbox Alignment</p>
    </div>
  </div>
</body>
</html>

CSS (styles.css):

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-align-example {
  text-align: center; /* Canh giữa nội dung theo chiều ngang */
}

.vertical-align-example {
  display: table-cell;
  vertical-align: middle; /* Canh giữa nội dung theo chiều dọc */
}

.flex-align-example {
  flex-direction: column;
  align-items: flex-start; /* Canh giữa các phần tử con theo chiều dọc */
}

Trong ví dụ này, chúng ta có ba phần tử .box nằm trong một phần tử .container sử dụng Flexbox để căn giữa cả phạm vi theo cả chiều ngang và chiều dọc. Mỗi .box chứa một ví dụ về cách sử dụng các thuộc tính align khác nhau:

.text-align-example: Sử dụng text-align: center để căn giữa nội dung theo chiều ngang.
.vertical-align-example: Sử dụng display: table-cell và vertical-align: middle để căn giữa nội dung theo chiều dọc.
.flex-align-example: Sử dụng Flexbox với align-items: flex-start để căn giữa các phần tử con theo chiều dọc.

Nhớ rằng cách sử dụng các thuộc tính align có thể khác nhau tùy thuộc vào cách bạn muốn căn chỉnh và cấu trúc layout của trang web.

Leave a Comment Cancel Reply