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

Đ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

Xem Thêm  Tự Tạo Web Tin Tức Bằng PHP ( Phần 2) - hướng dẫn làm web tin tức bằng php

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

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:

Xem Thêm  Python Thêm phần tử vào danh sách (10 Ví dụ) - thêm python danh sách phần tử

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ủ đề div thẳng hàng dọc ở giữa

10 Ways How to Center a Div Vertically in Another div | CSS Align Center

alt

  • Tác giả: HMA WebDesign
  • Ngày đăng: 2021-10-11
  • Đánh giá: 4 ⭐ ( 3477 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 10 easy ways how to center a div vertically in another div | CSS Align Center
    How to center a div vertically and horizontally in another div using CSS.
    This video is for those web developers who are struggling to find out how to center a div vertically in another div, or if you’re looking for some quick and easy ways on how to do it without too much fuss. In this video, I show you 10 different ways to center a div vertically in another. These are the best and easiest methods that work for any website layout.
    htmlcsswebsite, htmlcss2022 , htmlcssjavascripttutorial, htmltutorial

    center div inside another div vertically and horizontally bootstrap
    How to vertically center a div inside div bootstrap 4
    center div horizontally and vertically codepen coding htmlcss centercss
    how to center a div inside another div
    center text vertically in div programming
    horizontally center div inside div

    Centering an element horizontally and vertically in CSS is a very common question among website developers. Imagine that you have two parent div elements, one surrounding the other with their child dIVs inside of them on your HTML/CSS page- how do we center both sets so they are all aligned? There are many ways to achieve this goal but here’s what I typically use:

    Here are 10 easy ways to center a div vertically and horizontally:
    First of all, create an HTML div element with container class and another div inside container div with a class named innerDiv. Then apply the following CSS code to align content center inside container div:

    /* 1. Position Absolute and Negative Margin */
    .container {
    position: relative;
    }
    .innerDiv {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    }

    /*2. position Absolute woth Calc function */
    .container {
    position: relative;
    }
    .innerDiv {
    position: absolute;
    top: calc(50% – 50px);
    left: calc(50% – 50px);
    }

    /* 3. Using position Absolute with Transform */
    .container {
    position: relative;
    }
    .innerDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    /* 4- Absolute + Margin Auto */
    .container {
    position: relative;
    }.innerDiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }

    /* 5. Center a div center using text align */
    .container {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
    }
    .innerDiv {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    }

    /* 6. Center div center using Table */
    .container {
    text-align: center;
    }
    .innerDiv {
    display: inline-block;
    }

    /* 7. Align div center using CSS-table */
    .container {
    display: table-cell;
    text-align: center;
    vertical-align: middle ;
    }
    .innerDiv {
    display: inline-block;
    }

    /* 8. Using Flexbox css property */
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    }

    /* 9. How to align div center Using CSS Grid */
    .container {
    display: grid;
    }
    .innerDiv {
    align-self: center;
    justify-self: center;
    }

    /* 10. how to center a dive using writing-mode css property */
    .container {
    writing-mode: vertical-lr;
    text-align: center;
    }.middle {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
    }.innerDiv {
    display: inline-block;
    margin: auto;
    text-align: left;
    }

    center div horizontally and vertically,
    css center horizontally,
    how to align div in center,
    flexbox center horizontally,
    css div center horizontally,

    If you found this video helpful please share the video and SUBSCRIBE to this youtube channel. Please share your thoughts and queries in the comments below!

    ****************************
    The best tool for YouTube Ranking, Get a special discount now!
    Link: https://www.tubebuddy.com/hmawd

    ****************************
    – Please have a look at my website for more details!
    https://www.hmablogs.com/
    – Place an order for any Web Development work!
    https://www.fiverr.com/haaddison1?up_rollout=true

    ————————————————————————————————-
    Contact me through social media for web development work:
    – witter: https://twitter.com/HmaWebdesign
    – Facebook: https://web.facebook.com/HmaWebdesign
    – LinkedIn: https://www.linkedin.com/in/engrmianayub/
    – Instagram https://www.instagram.com/hmawebdesign/

    Music Credit:
    Music provided by NoCopyrightSounds
    Free Download/Stream: http://ncs.io

Canh giữa theo chiều dọc CSS

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

Làm cách nào để căn giữa div theo chiều dọc bên trong div div được định vị tuyệt đối

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 1377 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Trước hết lưu ý rằng vertical-alignchỉ áp dụng cho các ô của bảng và các phần…

Các cách căn dọc giữa trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 5010 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Đã bao giờ các bạn thắc mắc cái thuộc tính vertical-align: middle trong CSS chưa? Rõ ràng tên nó là căn dọc giữa mà sao nó lại không căn dọc giữa cho mình chứ? Nếu bạn chưa biết nguyên nhân…

Ba Điểm Thẳng Hàng – Học tốt toán lớp 6

  • Tác giả: itoan.vn
  • Đánh giá: 5 ⭐ ( 1549 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dưới đây là bài giảng và hướng dẫn giải chi tiết bài tập SGK Toán lớp 6 do Itoan biên soạn nhằm giúp ích cho các bạn học sinh trong học tập

Chèn một đường thẳng giữa các cột trên một trang

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 4959 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thêm đường thẳng đứng giữa các cột trên một trang bằng cách sử dụng hộp thoại cột.

Đội hình tiểu đội [Giáo dục quốc phòng]

  • Tác giả: lytuong.net
  • Đánh giá: 3 ⭐ ( 5964 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  ➤ Bạn có nên sử dụng Full Stack JavaScript Development không? 👍 - phát triển javascript đầy đủ ngăn xếp

By ads_php