Chỉnh sửa văn bản xuôi theo trục trung tâm 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 mời 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ự Note của người đọc. Đó là nguyên nhân vì sao văn bản CTA bên dưới được căn giữa.
Các nội dung liên quan:
Để đảm bảo bạn hiểu loại chỉnh sửa thông dụng này, trước tiên tất cả chúng ta sẽ hướng dẫn cách căn giữa văn bản theo chiều ngang. Sau đó, tất cả chúng ta sẽ xem xét vài cách căn giữa văn bản theo chiều dọc.
Table of Contents
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 tính chất text-align và xác nhận nó với giá trị “center”.
Hãy khởi đầu với một ví dụ đơn giản. Giả sử bạn có một website chỉ có văn bản và muốn căn giữa toàn bộ 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 tính chất text-align vào giữa.
Đây là CSS:
* {
text-align: center;
}
Hoặc CSS như sau:
body {
text-align: center;
}
HTML như sau:
<h2vàgt; Cách Căn giữa Văn bản trong CSS </h2vàgt; <pvàgt; Đâ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. </pvàgt; <h2vàgt; Giải thích </h2vàgt; <pvàgt; Sử dụng bộ chọn đa năng hoặc bộ chọn loại <strongvàgt; body </strongvàgt; và tính chất CSS text-align được đặt thành "center", mọi thứ trên trang sẽ được căn giữa. </pvàgt;
Toàn bộ 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 toàn bộ 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 tính chất 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 tính chất chỉnh sửa văn bản ở giữa. Bạn không phải thêm bất kỳ mã nào nữa để chỉnh sửa 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:
<h2vàgt; Cách Căn giữa Văn bản trong CSS </h2vàgt; <pvàgt; Đâ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. </pvàgt; <h2vàgt; Giải thích </h2vàgt; <pvàgt; Vì tôi đang sử dụng Trình chỉnh sửa thử nên chỉnh sửa mặc định được để lại. Vì vậy, nếu bạn muốn thay đổi chỉnh sửa của văn bản tiêu đề, ví dụ, bạn có thể sử dụng công cụ chọn loại và tính chất 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. </pvàgt;
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 tính chất 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.
Trước hết, hãy sử dụng tính chất 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 </h2vàgt; <pvàgt; Đâ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. </pvàgt; <h2vàgt; Giải thích </h2vàgt; <pvàgt; Để căn giữa chỉ một tiêu đề trên trang, tôi có thể thêm tính chất ID <strongvàgt; center </strongvàgt; vào thẻ mở của phần tử. Sau đó, tôi sẽ sử dụng công cụ chọn ID <strongvàgt; #center </strongvàgt; và tính chất CSS text-align được đặt thành "center". Kpi đề đó 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 . </pvàgt;
Chỉ một tiêu đề được căn giữa trang bằng bộ chọn CSS ID
Giờ đây, 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 website 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. Chỉnh sửa 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ì tính chất 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ể ứng 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:
<h2vàgt; Cách Căn giữa Văn bản trong CSS </h2vàgt; <pvàgt; Đâ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. </pvàgt; <h3vàgt; Giải thích </h3vàgt; <pvàgt; Nếu tôi muốn căn giữa một phần tử nội tuyến, ví dụ 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ể ứng dụng tính chất 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 tính chất style chứa tính chất 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. </pvàgt; <div style = "text-align: center"> <button type = "button" class = "btn btn-primary"> Nhấp vào tôi </buttonvàgt; </divvàgt;
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 tính chất div và text align
Như bạn có thể thấy từ các ví dụ trên, tính chất text-align chỉ xác nhận chỉnh sửa theo chiều ngang của văn bản. Việc chỉ định chỉnh sửa dọc của văn bản phức tạp hơn. Hãy xem bên dưới.
Chỉnh sửa theo chiều dọc văn bản
Bạn có thể căn giữa văn bản theo chiều xuôi theo vài cách. So 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 khởi đầ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 tính chất 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 phương án đơ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.
Để ứng 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ận cả tính chất padding-top và padding-bottom trong CSS của mình. Hoặc tôi có thể sử dụng tính chất viết tắt và bao gồm ba giá trị: giá trị trước nhất 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:
<h2vàgt; Cách căn giữa văn bản theo chiều dọc </h2vàgt; <pvàgt; Bạn có thể sử dụng tính chất padding để căn giữa văn bản trong phần tử div theo chiều dọc. </pvàgt; <div class = "center"> <pvàgt; Tôi được căn giữa theo chiều dọc. </pvàgt; </divvàgt;
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 tính chất 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 tính chất chiều cao dòng CSS. Bạn sẽ phải đặt tính chất 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:
<h2vàgt; Cách căn giữa văn bản theo chiều dọc </h2vàgt; <pvàgt; Bạn có thể sử dụng tính chất line-height để căn giữa văn bản trong phần tử div theo chiều dọc. </pvàgt; <div class = "center"> <pvàgt; Tôi được căn giữa theo chiều dọc. </pvàgt; </divvàgt;
Đâ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 tính chất 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 tính chất CSS position và tính chất chuyển hóa.
Để khởi đầ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 mang ra khỏi dòng tài liệu thông thường. Sau đó, đặt tính chất 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 tính chất thay đổi CSS. Sử dụng phương thức chuyển hóa được gọi là phương thức translate (), tất cả chúng ta có thể di chuyển đoạn văn xuôi 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:
<h2vàgt; Cách căn giữa văn bản theo chiều dọc (và theo chiều ngang) </h2vàgt; <pvàgt; Bạn có thể sử dụng vị trí CSS và tính chất transform để căn giữa văn bản trong phần tử div theo chiều dọc và chiều ngang. </pvàgt; <div class = "center"> <pvàgt; Tôi được căn giữa theo chiều dọc và chiều ngang. </pvàgt; </divvàgt;
Đâ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à tính chất chuyển hóa
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ó thỏa mãn và không yêu cầu tính toán lề.
Trước hết, bạn cần xác nhận 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 tính chất hiển thị thành “flex”. Sau đó, xác nhận các mục chỉnh sửa và chỉnh sửa 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:
<h2vàgt; Cách căn giữa văn bản theo chiều dọc (và theo chiều ngang) </h2vàgt; <pvàgt; 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 khoảng thời gian bạn đặt tính chất hiển thị của div thành "flex", hãy đặt tính chất 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 tính chất justify-content thành "center". </pvàgt; <div class = "center"> <pvàgt; Tôi được căn giữa theo chiều dọc và chiều ngang. </pvàgt; </divvàgt;
Đâ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
Tổng kết
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 website 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 trội. Nếu bạn quan tâm đến các kiểu chỉnh sửa khác, hãy xem Cách căn lề trái, phải & trung tâm văn bản trong HTML.
Share this:
Like this:
Like
Loading…
Related
