Tìm hiểu cách căn giữa văn bản theo chiều ngang và chiều dọc với CSS.

Bạn đang xem : cách căn giữa văn bản

Căn chỉnh văn bản dọc theo trục giữa có thể làm cho trang trông giố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 yếu tố cụ thể trên trang. Ví dụ: tiêu đề, dấu ngoặc kép và lờ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ự 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.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Để đả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

Để 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ó bằng 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ổ quát CSS ( * ) hoặc bộ chọn loại body để 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 thành căn giữa.

Đây là CSS:

  
* {

text-align: center;

} < br />

CSS của bạn cũng có thể trông giống như thế này:

  
body {

text-align: center;

} < br />

Đây là HTML:

  
& lt; h2 & gt; Cách Căn giữa Văn bản trong CSS & lt; / h2 & gt;

& lt; p & 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. & Lt; / p & gt;

& lt; h2 & gt; Giải thích & lt; / h2 & gt;

& lt; p & gt; Sử dụng bộ chọn đa năng hoặc bộ chọn loại & lt ; mạnh & gt; body & lt; / strong & gt; 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. & lt; / p & gt;

Đây là kết quả:

Nguồn hình ảnh

Tài nguyên Nổi bật

Hướng dẫn giới thiệu về CSS dành cho nhà tiếp thị

Điền vào biểu mẫu cho bản sao hướng dẫn CSS 101 này của bạn.

Đ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.

Xem Thêm  Tải lên tệp bằng HTML - cách tạo nút tải lên trong html

Đây là CSS:

  
h2 {

text-align: center;

} < br />

Đây là HTML:

  
& lt; h2 & gt; Cách Căn giữa Văn bản trong CSS & lt; / h2 & gt;

& lt; p & 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. & Lt; / p & gt;

& lt; h2 & gt; Giải thích & lt; / h2 & gt;

& lt; p & gt; Vì tôi đang sử dụng W3Schools Tryit Editor , căn chỉnh mặc định là bên trá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 bộ 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. & Lt; / p & gt;

Đây là kết quả:

Nguồn hình ảnh

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:

  
& lt; h2 id = "center" & gt; Cách Căn giữa Văn bản trong CSS & lt; / h2 & gt;
< br /> & lt; p & 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. & Lt; / p & gt;

& lt; h2 & gt; Giải thích & lt; / h2 & gt;

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

Đây là kết quả:

Nguồn hình ảnh

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.

Xem Thêm  ASP.NET 4 and Visual Studio 2010 Web Development Overview - devise là gì

Giả sử tôi đang xây dựng một trang web bằng Bootstrap CSS và tôi thêm 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à 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 bọc nút trong 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:

  
& lt; h2 & gt; Cách Căn giữa Văn bản trong CSS & lt; / h2 & gt;

& lt; p & 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. & lt; / p & gt;

& lt; h3 & gt; Giải thích & lt; / h3 & gt;

& lt; p & gt; Nếu tôi muốn căn giữa một phần tử nội tuyến, như một nút, thì tôi cần phải bọc nó trong một phần tử cấp khối, như div trước. 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. & Lt; / p & gt;

& lt; div style = "text-align: center" & gt;

& lt; button type = "button" class = "btn btn-primary" & gt; Nhấp vào Tôi & lt; / button & gt;

& lt; / div & gt;

Đây là kết quả:

Nguồn hình ảnh

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 cùng và dưới cùng.

Để áp dụng CSS padding 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.

Xem Thêm  Hướng dẫn hoàn chỉnh để tạo kiểu nội tuyến trong ứng dụng React - cú pháp kiểu phản ứng nội tuyến

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

  
.center {

padding: 50px 0 50px;

background : # 999FF0;

}

Xem thêm những thông tin liên quan đến chủ đề cách căn giữa một văn bản

4 cách CĂN GIỮA khối trong html css có thể bạn chưa biết | Học html css cơ bản

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-12-22
  • Đánh giá: 4 ⭐ ( 1205 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này hướng dẫn bạn 4 cách để canh giữa khối trong css. Nó cực kỳ quan trọng trong việc xây dựng layout website của bạn.
    ——
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ————
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    ————————–
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Các thông số cho một văn bản chuẩn như thế nào?

  • Tác giả: ketoanducminh.edu.vn
  • Đánh giá: 4 ⭐ ( 4042 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thông số cho một văn bản chuẩn như thế nào?

✓ Cách căn chữ giữa ô trong word

  • Tác giả: thuthuat.tip.edu.vn
  • Đánh giá: 5 ⭐ ( 6847 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn 4 cách căn giữa ô trong bảng trên Word cực đơn giản

  • Tác giả: www.thegioididong.com
  • Đánh giá: 5 ⭐ ( 2792 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn 4 cách căn giữa ô trong bảng trên Word cho mọi phiên bản cực đơn giản, chi tiết dễ thực hiện, có ví dụ minh họa. Vào xem ngay!

Cách căn giữa ô trong Word, Excel 2016, 2013, 2010, 2007, 2003, Căn ch

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 1099 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: can giua o trong word, excel, Cách căn giữa ô trong word 2016, 2013, 2010, 2007 2013. hãy để Taimienphi.vn hướng dẫn bạn qua vài bước đơn giản bên dưới.

Cách để Căn giữa văn bản trên Microsoft Word

  • Tác giả: www.wikihow.vn
  • Đánh giá: 4 ⭐ ( 4912 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Microsoft Word mang đến hàng loạt tính năng tùy chỉnh tài liệu, nhiều đến nỗi mà trên thực tế, bạn sẽ gặp khó khăn khi xác định cách tiến hành những tác vụ đơn giản như căn giữa cho văn bản. May mắn là một khi bạn đã biết thì cách thực…

Căn trái hoặc phải văn bản, căn giữa văn bản hoặc căn đều văn bản trên một trang

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 2587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn chỉnh các cạnh của bạn sang trái, giữa, bên phải hoặc bản thể, hoặc theo chiều dọc đến trên cùng, Trung tâm hoặc dưới cùng giữa lề.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php