Ngay cả với các công cụ hữu ích như CSS Grid và Flexbox, các yếu tố căn giữa trong CSS vẫn nổi tiếng là thách thức. Nó là chủ đề của nhiều trò đùa và meme, và khi bạn căn giữa thành công một thứ gì đó, bạn sẽ muốn khoe khoang về nó. Tại sao căn giữa các phần tử CSS lại khó đến vậy? CSS có thể khó hoạt động

Bạn đang xem: div text vertical align middle

Ngay cả với các công cụ hữu ích như CSS Grid và Flexbox, các phần tử căn giữa trong CSS vẫn nổi tiếng là thách thức .

Đó là chủ đề của nhiều trò đùa và meme, và khi bạn căn giữa thành công điều gì đó, bạn sẽ muốn khoe khoang về điều đó.

Tại sao Căn giữa các phần tử CSS lại khó đến vậy?

Có thể khó làm việc với CSS. Ví dụ: nếu bạn đang cố gắng căn chỉnh thứ gì đó theo chiều ngang HOẶC theo chiều dọc, điều đó không khó lắm.

Bạn chỉ có thể đặt căn chỉnh văn bản thành căn giữa cho phần tử nội dòng và margin: 0 auto sẽ làm điều đó cho phần tử cấp khối.

Nhưng các vấn đề nảy sinh trên nhiều mặt nếu bạn đang cố gắng kết hợp cả căn chỉnh dọc và ngang.

Trong hướng dẫn này, tôi sẽ giới thiệu cho bạn ba phương pháp khác nhau để căn giữa một cách chính xác một div, văn bản hoặc hình ảnh trong CSS.

Cách Căn giữa Phần tử bằng Thuộc tính Vị trí CSS

Thuộc tính vị trí CSS nhận các giá trị tương đối, tuyệt đối, cố định và tĩnh (mặc định). Khi được đặt, bạn sẽ có thể áp dụng các thuộc tính trên cùng, bên phải, dưới cùng và bên trái cho phần tử.

Sự kết hợp giữa giá trị tương đối và giá trị tuyệt đối có thể giúp bạn hoàn thành nhiều việc và vì vậy bạn có thể sử dụng giá trị này để căn giữa mọi thứ.

Hãy xem các đoạn trích bên dưới để xem một số ví dụ.

Cách căn giữa văn bản với định vị CSS

  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; p & gt; Tôi là Người cắm trại và tôi được căn giữa theo chiều dọc & lt; / p & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
  * {
  lề: 0;
  đệm: 0;
  box-sizing: border-box;
}

.thùng đựng hàng {
  chức vụ: thân nhân;
  chiều cao: 400px;
  viền: 2px solid # 006100;
}

.centered-element {
  lề: 0;
  vị trí: tuyệt đối;
  top: 50%;
  biến đổi: translateY (-50%);
}
 

ss1b < / p>

Cách căn giữa hình ảnh với định vị CSS

  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; img src = "freecodecamp.png" alt = "căn giữa" / & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
  * {
  lề: 0;
  đệm: 0;
  box-sizing: border-box;
}

.thùng đựng hàng {
  chức vụ: thân nhân;
  chiều cao: 400px;
  viền: 2px solid # 006100;
}

.centered-element {
  lề: 0;
  vị trí: tuyệt đối;
  top: 50%;
  biến đổi: translateY (-50%);
}
 

ss2b < / p>

Xem Thêm  Định dạng một số thành 2 vị trí thập phân trong JavaScript - định dạng javascript vị trí thập phân

Đoạn mã trên đã làm cho văn bản và hình ảnh được căn giữa theo chiều dọc. Để xử lý cả căn giữa theo chiều dọc và chiều ngang, chúng ta cần thực hiện một chút chỉnh sửa trong CSS. Chúng tôi sẽ đặt thuộc tính hàng đầu thành 50% và chúng tôi sẽ thêm một phép biến đổi trên cả trục X và Y.

  * {
  lề: 0;
  đệm: 0;
  box-sizing: border-box;
}

.thùng đựng hàng {
  chức vụ: thân nhân;
  chiều cao: 400px;
  viền: 2px solid # 006100;
}

.centered-element {
  lề: 0;
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-50%, -50%);
}

 

Văn bản bây giờ trông giống như sau:
ss4b

Và hình ảnh như thế này:
ss3b

Lưu ý rằng tôi đã áp dụng thuộc tính biến đổi vì phần tử con (với lớp phần tử căn giữa) hơi lệch tâm. translateY () đẩy nó vào giữa theo chiều dọc và dịch trên cả trục X và Y ( translate () ) đẩy nó vào giữa theo chiều dọc và chiều ngang.

Cách căn giữa một phần tử bằng Flexbox trong CSS

CSS Flexbox xử lý bố cục trong một thứ nguyên (hàng hoặc cột). Với Flexbox, thật dễ dàng căn giữa một div, văn bản hoặc hình ảnh chỉ trong ba dòng mã.

Kiểm tra các đoạn mã dưới đây để biết ví dụ.

Cách căn giữa văn bản với Flexbox

 & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; p & gt; Tôi là Người cắm trại và tôi được căn giữa theo chiều dọc & lt; / p & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
 . container {
    hiển thị: flex;
    align-các mục: trung tâm;
    chiều cao: 600px;
    viền: 2px solid # 006100;
}
 

ss5b-1

Cách căn giữa hình ảnh với Flexbox

  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; img src = "freecodecamp.png" alt = "căn giữa" / & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
 . container {
    hiển thị: flex;
    align-các mục: trung tâm;
    chiều cao: 600px;
    viền: 2px solid # 006100;
}
 

ss6b < / p>

Chúng tôi đã quan tâm đến việc căn chỉnh theo chiều dọc chỉ trong hai dòng mã. Để căn giữa hình ảnh và văn bản theo chiều ngang, hãy thêm vào justify-content: center.

  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; p & gt; Tôi là Người cắm trại, tôi hiện đang căn giữa theo chiều dọc và chiều ngang & lt; / p & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; img src = "freecodecamp.png" alt = "căn giữa" / & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
 . container {
    hiển thị: flex;
    align-các mục: trung tâm;
    justify-content: trung tâm;
    chiều cao: 600px;
    viền: 2px solid # 006100;
}
 

Văn bản bây giờ trông giống như sau:
ss7bb

Xem Thêm  1️⃣ Cách xem main máy tính – Vi tính quận 7

Và hình ảnh như sau: ss11bb

Cách căn giữa một phần tử bằng CSS Grid

Với Flexbox, thật dễ dàng để căn giữa mọi thứ, phải không? Nhưng với CSS Grid, việc căn giữa mọi thứ thực sự dễ dàng, bởi vì hai dòng mã là đủ để làm điều đó cho bạn.

Cách căn giữa văn bản với CSS Grid

  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; p & gt; Tôi là Người cắm trại và tôi được căn giữa theo chiều dọc & lt; / p & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
 . container {
    hiển thị: lưới;
    align-các mục: trung tâm;
    chiều cao: 600px;
    viền: 2px solid # 006100;
}
 

ss8bb < / p>

Cách căn giữa Hình ảnh bằng CSS Grid

  & lt; div class = "container" & gt;
    & lt; div class = "centered-element" & gt;
      & lt; img src = "freecodecamp.png" alt = "căn giữa" / & gt;
    & lt; / div & gt;
& lt; / div & gt;
 
 . container {
    hiển thị: lưới;
    align-các mục: trung tâm;
    chiều cao: 600px;
    viền: 2px solid # 006100;
}
 

Các ví dụ trên sẽ giúp bạn căn giữa theo chiều dọc. Để văn bản và hình ảnh được căn giữa theo chiều ngang, hãy thay thế các mục căn chỉnh bằng các mục địa điểm – sự kết hợp của cả align-items justify-content :

 . container {
    hiển thị: lưới;
    địa điểm-mục: trung tâm;
    chiều cao: 600px;
    viền: 2px solid # 006100;
}

 

Văn bản bây giờ trông giống như sau:

ss7bb-1

Và hình ảnh như thế này:
ss11bb-1

Cách Căn giữa một Div, Văn bản hoặc Hình ảnh Độc lập trong CSS

Ba phương pháp trên cho phép bạn căn giữa một div, văn bản hoặc hình ảnh trong một vùng chứa. Bạn cũng có thể căn giữa một div, văn bản hoặc hình ảnh độc lập.

Hãy xem cách thực hiện điều đó ngay bây giờ.

Cách căn giữa một div độc lập trong CSS

  & lt; div class = "container" & gt; & lt; / div & gt;
 
  div.container {
    chiều cao: 300px;
    chiều rộng: 300px;
    viền: 2px solid # 006100;
    margin: 0 auto;
  }
 

ss12bb < / p>

Cách căn giữa văn bản độc lập trong CSS

 & lt; p & gt; Tôi là Người cắm trại và tôi tập trung vào & lt; / p & gt;
 
  p {
         text-align: center;
     }
 

ss13bb < / p>

Cách căn giữa một hình ảnh độc lập trong CSS

  & lt; img src = "freecodecamp.png" alt = "center" / & gt;
 
  img {
      hiển thị: khối;
      margin: 0 auto;
 }
 / * Áp dụng hiển thị khối, lề 0f 0 ở trên cùng và bootom,
 và tự động ở bên trái và bên phải * /
 

ss14bb < / p>

Kết luận

Tôi hy vọng hướng dẫn này cung cấp cho bạn đủ kiến ​​thức về căn chỉnh theo chiều dọc và cách căn giữa các phần tử trong CSS để bạn bớt gặp rắc rối trong dự án tiếp theo.

Cảm ơn bạn đã đọc và tiếp tục viết mã.


Xem thêm những thông tin liên quan đến chủ đề văn bản div căn chỉnh theo chiều dọc ở giữa

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

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-12-22
  • Đánh giá: 4 ⭐ ( 4295 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ăn (canh) giữa trong CSS đơn giản dễ hiểu

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 7245 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, Hocban.vn chia sẻ đến bạn cách để căn giữa (hay còn gọi là canh giữa) phần tử trong CSS đơn giản và dễ hiểu nhất có thể.

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9550 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++.

Ví dụ về kiểu văn bản căn giữa, căn đều, căn phải

  • Tác giả: kiemlua24h.co
  • Đánh giá: 3 ⭐ ( 5092 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng tôi sử dụng CSS text-align thuộc tính để căn chỉnh nội dung bên trong phần tử cấp khối.Ví dụ về các phần tử cấp khối là các đoạn văn…

Làm thế nào để căn giữa văn bản theo chiều dọc trong tài liệu Word?

  • Tác giả: vi.extendoffice.com
  • Đánh giá: 5 ⭐ ( 1812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách căn giữa văn bản theo chiều dọc trên trang trong Microsoft Word / làm thế nào để

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 5678 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cần tạo một trang bìa cho một báo cáo bạn đang viết? Bạn có thể tạo một trang bìa đơn giản nhưng chuyên nghiệp bằng cách căn giữa văn bản theo chiều ngang và chiều dọc. Định tâm văn bản theo chiều ngang trên một trang là dễ dàng, nhưng theo chiều dọc? Điều đó cũng dễ dàng và chúng tôi sẽ chỉ cho bạn cách.

One moment, please…

  • Tác giả: quachquynh.com
  • Đánh giá: 5 ⭐ ( 9541 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

Xem Thêm  Chuyển đổi câu lệnh trong C # - c tuyên bố chuyển đổi sắc nét

By ads_php