Căn giữa(align-center) trong CSS

Căn giữa(align-center) trong CSS

Rate this post

Căn chỉnh văn bản dọc theo trục chính giữa có thể làm cho trang trông có tổ chức và đối xứng – nó cũng có thể thu hút ánh nhìn của khách truy cập vào các phần tử cụ thể trên trang. Ví dụ: tiêu đề, dấu ngoặc kép và lời kêu gọi hành động thường được đặt ở giữa để làm gián đoạn dòng chảy của tài liệu và thu hút sự chú ý của người đọc. Đó là lý do tại sao văn bản CTA bên dưới được căn giữa.

Các bài viết liên quan:

Để đảm bảo bạn hiểu loại căn chỉnh phổ biến này, trước tiên chúng ta sẽ hướng dẫn cách căn giữa văn bản theo chiều ngang. Sau đó, chúng ta sẽ xem xét một số cách căn giữa văn bản theo chiều dọc.

Cách căn giữa văn bản trong CSS chiều ngang

Để căn giữa văn bản trong CSS, hãy sử dụng thuộc tính text-align và xác định nó với giá trị “center”.

Hãy bắt đầu với một ví dụ đơn giản. Giả sử bạn có một trang web chỉ có văn bản và muốn căn giữa tất cả văn bản. Sau đó, bạn có thể sử dụng bộ chọn phổ dụng CSS (*) hoặc nội dung bộ chọn loại để nhắm mục tiêu mọi phần tử trên trang. Sau đó, bạn sẽ đặt thuộc tính text-align vào giữa.

Đây là CSS:

* {

text-align: center;

}

Hoặc CSS như sau:

body {

text-align: center;

}

HTML như sau:

<h2> Cách Căn giữa Văn bản trong CSS </h2>

<p> Đây là văn bản giả. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. </p>

<h2> Giải thích </h2>

<p> Sử dụng bộ chọn đa năng hoặc bộ chọn loại <strong> body </strong> và thuộc tính CSS text-align được đặt thành "center", mọi thứ trên trang sẽ được căn giữa. </p>

Tất cả văn bản, bao gồm cả tiêu đề và đoạn văn, đều được căn giữa bằng CSS

Điều gì xảy ra nếu bạn không muốn tất cả văn bản trên trang được căn giữa hoặc trang của bạn chứa hình ảnh và các yếu tố khác ngoài văn bản? Trong trường hợp đó, bạn sẽ sử dụng cùng một thuộc tính text-align nhưng một bộ chọn CSS khác. Ví dụ: giả sử bạn muốn các tiêu đề được căn giữa trên một trang, nhưng các đoạn văn được căn trái. Sau đó, bạn sẽ sử dụng công cụ chọn loại h2 và đặt thuộc tính căn chỉnh văn bản ở giữa. Bạn không phải thêm bất kỳ mã nào nữa để căn chỉnh các đoạn văn – theo mặc định, chúng sẽ được căn trái.

Đây là CSS:

h2 {

text-align: center;

}

Đây là code html:

<h2> Cách Căn giữa Văn bản trong CSS </h2>

<p> Đây là văn bản giả. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. </p>

<h2> Giải thích </h2>

<p> Vì tôi đang sử dụng Trình chỉnh sửa thử  nên căn chỉnh mặc định được để lại. Vì vậy, nếu bạn muốn thay đổi căn chỉnh của văn bản tiêu đề, chẳng hạn, bạn có thể sử dụng công cụ chọn loại và thuộc tính CSS text-align được đặt thành "center". Mọi thứ khác trên trang - trong trường hợp này là các đoạn văn - sẽ vẫn nằm nghiêng so với lề trái. </p>

Chỉ các tiêu đề được căn giữa trên trang bằng CSS

Nếu bạn chỉ muốn căn giữa một phần tử duy nhất trên trang, thì bạn có thể thêm thuộc tính id vào phần tử và nhắm mục tiêu nó bằng bộ chọn ID. Hoặc, bạn có thể sử dụng CSS nội tuyến.

Đầu tiên, hãy sử dụng thuộc tính ID và bộ chọn.

Đây là CSS:

#center {

text-align: center;

}

Đây là HTML:

<h2 id = "center"> Cách Căn giữa Văn bản trong CSS </h2>

<p> Đây là văn bản giả. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. </p>

<h2> Giải thích </h2>

<p> Để căn giữa chỉ một tiêu đề trên trang, tôi có thể thêm thuộc tính ID <strong> center </strong> vào thẻ mở của phần tử. Sau đó, tôi sẽ sử dụng công cụ chọn ID <strong> #center </strong> và thuộc tính CSS text-align được đặt thành "center". Chỉ tiêu đề đó sẽ được căn giữa trên trang. Văn bản khác sẽ vẫn được căn trái theo mặc định . </p>

Chỉ một tiêu đề được căn giữa trang bằng bộ chọn CSS ID

Bây giờ, hãy sử dụng CSS nội tuyến. Nhưng thay vì căn giữa các tiêu đề và đoạn văn, hãy căn giữa văn bản bên trong một phần tử khác.

Giả sử tôi đang xây dựng một trang web bằng Bootstrap CSS và tôi thêm một nút Bootstrap mà tôi muốn căn giữa trên trang. Căn chỉnh nút và văn bản bên trong nút sẽ hơi khác so với các ví dụ ở trên. Đó là bởi vì thuộc tính text-align chỉ hoạt động trên các phần tử cấp khối như tiêu đề và đoạn văn, không hoạt động trên các phần tử nội dòng như nút.

Vì vậy, trước tiên, tôi phải quấn nút trong một div. Sau đó, tôi có thể áp dụng CSS nội tuyến cho div như hình dưới đây.

Đây là HTML với CSS nội tuyến:

<h2> Cách Căn giữa Văn bản trong CSS </h2>

<p> Đây là văn bản giả. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Đây là văn bản giả hơn. Thi
s là văn bản giả hơn. Đây là văn bản giả hơn. </p>

<h3> Giải thích </h3>

<p> Nếu tôi muốn căn giữa một phần tử nội tuyến, chẳng hạn như một nút, thì trước tiên tôi cần đặt nó trong một phần tử cấp khối, như một div. Chỉ khi đó, tôi mới có thể áp dụng thuộc tính text-align cho div. Nếu tôi chỉ muốn căn giữa div này, tôi có thể sử dụng thuộc tính style chứa thuộc tính text-align được đặt thành "center". Mọi thứ khác trên trang sẽ vẫn nằm nghiêng so với lề trái. </p>

<div style = "text-align: center">

<button type = "button" class = "btn btn-primary"> Nhấp vào tôi </button>

</div>

Căn giữa văn bản bên trong một phần tử nút bằng cách sử dụng thuộc tính div và text align

Như bạn có thể thấy từ các ví dụ trên, thuộc tính text-align chỉ xác định căn chỉnh theo chiều ngang của văn bản. Việc chỉ định căn chỉnh dọc của văn bản phức tạp hơn. Hãy xem bên dưới.

Căn chỉnh theo chiều dọc văn bản

Bạn có thể căn giữa văn bản theo chiều dọc theo một số cách. Đối với các phương thức bên dưới, văn bản sẽ phải được chứa bởi một phần tử mẹ, như một div. Hãy bắt đầu với điều dễ dàng nhất.

Lưu ý rằng nếu bạn muốn văn bản của mình cũng được căn giữa theo chiều ngang, chỉ cần thêm thuộc tính text-align được đặt ở giữa vào CSS của bất kỳ ví dụ nào bên dưới.

Văn bản căn giữa theo chiều dọc sử dụng CSS Padding

Một trong những giải pháp đơn giản nhất để căn giữa văn bản theo chiều dọc là sử dụng phần đệm trên và dưới.

Để áp dụng phần đệm CSS cho một phần tử, tôi có thể sử dụng phương thức biểu mẫu dài và xác định cả thuộc tính padding-top và padding-bottom trong CSS của mình. Hoặc tôi có thể sử dụng thuộc tính viết tắt và bao gồm ba giá trị: giá trị đầu tiên sẽ đại diện cho phần đệm trên cùng, giá trị thứ hai sẽ đại diện cho phần đệm bên trái và bên phải và giá trị thứ ba sẽ đại diện cho phần đệm dưới cùng.

Đây là CSS sử dụng phương pháp viết tắt:

.center {

  padding: 50px 0 50px;

  background: #999FF0;
}

Đây là HTML:

<h2> Cách căn giữa văn bản theo chiều dọc </h2>

<p> Bạn có thể sử dụng thuộc tính padding để căn giữa văn bản trong phần tử div theo chiều dọc. </p>

<div class = "center">

  <p> Tôi được căn giữa theo chiều dọc. </p>

</div>

Văn bản được căn giữa theo chiều dọc trong một div bằng cách sử dụng đệm CSS

Văn bản căn giữa theo chiều dọc sử dụng thuộc tính Line-Height CSS

Để căn giữa văn bản theo chiều dọc trong một phần tử, bạn cũng có thể sử dụng thuộc tính chiều cao dòng CSS. Bạn sẽ phải đặt thuộc tính có giá trị bằng chiều cao của phần tử vùng chứa.

Đây là CSS:

.center {

  line-height: 150px;

  height: 150px;

  background: #999FF0;

}

Đây là HTML:

<h2> Cách căn giữa văn bản theo chiều dọc </h2>

<p> Bạn có thể sử dụng thuộc tính line-height để căn giữa văn bản trong phần tử div theo chiều dọc. </p>

<div class = "center">

  <p> Tôi được căn giữa theo chiều dọc. </p>

</div>

Đây là kết quả:

Văn bản được căn giữa theo chiều dọc trong một div bằng cách sử dụng thuộc tính chiều cao dòng CSS

Căn giữa theo chiều dọc bằng cách sử dụng CSS Position và Transform Properties

Một phương pháp khác để căn giữa văn bản theo chiều dọc trên trang yêu cầu thuộc tính CSS position và thuộc tính chuyển đổi.

Để bắt đầu, hãy đặt vị trí của div chứa văn bản thành tương đối. Sau đó, bạn muốn tạo kiểu cho đoạn trong div. Trước tiên, hãy đặt vị trí của nó thành tuyệt đối để nó được đưa ra khỏi dòng tài liệu thông thường. Sau đó, đặt thuộc tính bên trái và trên cùng thành 50%. Điều này yêu cầu trình duyệt căn lề trái và trên cùng của đoạn văn với tâm của trang theo chiều ngang và chiều dọc (tức là. 50% sang phải và xuống trang). Vấn đề là chúng tôi không muốn các cạnh của đoạn văn được xếp ở giữa trang – chúng tôi muốn phần giữa của đoạn được xếp ở giữa trang.

Đó là nơi xuất hiện thuộc tính biến đổi CSS. Sử dụng phương thức chuyển đổi được gọi là phương thức translate (), chúng ta có thể di chuyển đoạn văn dọc theo trục X và Y. Để thực sự căn giữa đoạn văn, chúng tôi muốn di chuyển nó 50% sang trái và lên từ vị trí hiện tại của nó. Điều đó sẽ yêu cầu trình duyệt đặt trung tâm của đoạn văn vào giữa trang.

Đây là CSS:

.center {

  position: relative;

  height: 150px;

  background: #999FF0;

}

.center p {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  margin: 0;

}

Đây là HTML:

<h2> Cách căn giữa văn bản theo chiều dọc (và theo chiều ngang) </h2>

<p> Bạn có thể sử dụng vị trí CSS và thuộc tính transform để căn giữa văn bản trong phần tử div theo chiều dọc và chiều ngang. </p>

<div class = "center">

  <p> Tôi được căn giữa theo chiều dọc và chiều ngang. </p>

</div>

Đây là kết quả:

Văn bản được căn giữa theo chiều dọc và chiều ngang trong một div bằng cách sử dụng vị trí CSS và thuộc tính chuyển đổi

Văn bản căn giữa theo chiều dọc sử dụng Flexbox

Flexbox là một trong những phương pháp tốt nhất để căn giữa văn bản theo chiều dọc (và theo chiều ngang) vì nó đáp ứng và không yêu cầu tính toán lề.

Đầu tiên, bạn cần xác định vùng chứa mẹ – trong trường hợp này là div – là vùng chứa linh hoạt. Bạn thực hiện việc này bằng cách đặt thuộc tính hiển thị thành “flex”. Sau đó, xác định các mục căn chỉnh và căn chỉnh nội dung p

roperty thành “trung tâm”. Điều này sẽ yêu cầu trình duyệt căn giữa mục flex (div trong div) theo chiều dọc và chiều ngang.

Đây là CSS:

.center {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 150px;

  background: #999FF0;

}

Đây là HTML:

<h2> Cách căn giữa văn bản theo chiều dọc (và theo chiều ngang) </h2>

<p> Bạn có thể sử dụng Flexbox để căn giữa văn bản trong phần tử div theo chiều dọc. Sau khi bạn đặt thuộc tính hiển thị của div thành "flex", hãy đặt thuộc tính align-items thành "center" để căn giữa văn bản theo chiều dọc. Để căn giữa văn bản theo chiều ngang, hãy đặt thuộc tính justify-content thành "center". </p>

<div class = "center">

  <p> Tôi được căn giữa theo chiều dọc và chiều ngang. </p>

</div>

Đây là kết quả:

Văn bản được căn giữa theo chiều dọc và chiều ngang trong một div bằng cách sử dụng flexbox

Kết luận

Nếu bạn có một số kiến ​​thức cơ bản về HTML và CSS, bạn có thể dễ dàng căn giữa văn bản trên các trang web của mình. Điều này có thể giúp bạn xây dựng bố cục trang tùy chỉnh và làm cho nội dung của bạn nổi bật. Nếu bạn quan tâm đến các kiểu căn chỉnh khác, hãy xem Cách căn lề trái, phải & chính giữa văn bản trong HTML.

Leave a Reply