Trong thế giới HTML và CSS, tất cả là về cấu trúc bố cục và sự phân bố của các phần tử. Chúng tôi thường sử dụng HTML để xác định đánh dấu và cấu trúc, trong khi CSS giúp chúng tôi xử lý kiểu dáng và căn chỉnh của các phần tử. Trong bài đăng này, chúng ta sẽ tìm hiểu một chút về

Bạn đang xem: div giữa văn bản theo chiều dọc

Trong thế giới HTML và CSS, tất cả là về bố cục cấu trúc và sự phân bố của các phần tử. Chúng tôi thường sử dụng HTML để xác định đánh dấu và cấu trúc, trong khi CSS giúp chúng tôi xử lý kiểu dáng và căn chỉnh của các phần tử.

Trong bài đăng này, chúng tôi sẽ tìm hiểu một chút về các cách khác nhau mà chúng tôi có thể căn giữa các phần tử HTML và xử lý căn chỉnh theo chiều dọc với CSS.

Trước tiên, chúng ta sẽ tìm hiểu cách căn chỉnh văn bản bằng CSS.

Tiếp theo, chúng ta sẽ trình bày cách căn chỉnh một div và bất kỳ phần tử nào khác.

Và cuối cùng chúng ta sẽ tìm hiểu cách đặt văn bản và div lại với nhau trong một vùng chứa.

Cách center text

Có nhiều cách để căn giữa văn bản bằng cách sử dụng CSS.

Sử dụng thuộc tính Float

Float là một cách dễ dàng để căn chỉnh văn bản.

Để đặt văn bản ở bên phải của bố cục, chúng ta chỉ cần sử dụng right làm giá trị cho float .

Để đặt văn bản ở phía bên trái, chúng tôi sử dụng left , như float: left . Hãy xem ví dụ bên dưới:

  .right {
        float: phải;
      }
     
      .bên trái {
        float: trái;
      }
// HTML

    & lt; span class = "right" & gt; Right & lt; / span & gt;
    & lt; span class = "left" & gt; Left & lt; / span & gt;  

Để căn giữa văn bản bằng cách sử dụng float, chúng ta có thể sử dụng margin-left hoặc margin -phải và đặt nó 50% , như bên dưới.

  .center {
    float: trái;
    margin-left: 50%;
    }

/ * HTML * /
& lt; span class = "center" & gt; Center & lt; / span & gt;  

Bạn có thể tìm hiểu thêm về cách sử dụng của Float tại đây .

Sử dụng Text-align

text-align là cách thuận tiện hơn và cụ thể hơn để căn chỉnh văn bản. Nó cho phép chúng tôi đặt văn bản ở center hoặc ở bên trái hoặc phải , như ví dụ sau cho thấy:

< pre> . right {
text-align: phải;
}

.bên trái {
text-align: left;
}
.trung tâm {
text-align: center;
}
/ * HTML * /

& lt; p class = "right" & gt; Right & lt; / p & gt;
& lt; p class = "center" & gt; Center & lt; / p & gt;
& lt; p class = "left" & gt; Left & lt; / p & gt;

Tìm hiểu thêm về text-align .

Cách căn chỉnh div

Chà, có rất nhiều cách để làm điều đó.

Giống như cách chúng ta sử dụng Float để căn chỉnh văn bản, chúng ta cũng có thể sử dụng nó để căn chỉnh phần tử div .

Float thực hiện công việc, nhưng CSS cung cấp cho chúng ta các tùy chọn tốt hơn, thuận tiện và trang nhã hơn. Bạn đã nghe nói về Flexbox chưa? Hay css-grid ?

Hai phương pháp này cung cấp những cách rất hiện đại để căn chỉnh và làm việc với bố cục của bạn trong CSS. Hãy xem Flexbox chi tiết hơn.

Flexbox cung cấp một cách dễ dàng và đơn giản để căn chỉnh div – và đó là phương pháp yêu thích của tôi cho đến nay để xử lý bố cục trong CSS (tôi sử dụng nó hàng ngày).

Hãy xem chúng ta sẽ làm gì với Flexbox để xem nó hoạt động như thế nào bằng cách tạo lại ví dụ tương tự như trên.

Ví dụ:

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
  & lt; đầu & gt;
    & lt; meta charset = "UTF-8" / & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" / & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "ie = edge" / & gt;
    & lt; title & gt; Flexbox & lt; / title & gt;
    & lt; phong cách & gt;
      .thùng đựng hàng {
        hiển thị: flex;
      }
      .container div {
        chiều rộng: 33%;
        chiều cao: 60px;
      }

      .bên trái {
        nền: màu vàng;
      }
      .bên phải {
        nền: đỏ;
      }
      .trung tâm {
        nền: lightblue;
      }
    & lt; / style & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; div class = "container" & gt;
      & lt; div class = "left" & gt; Left div & lt; / div & gt;
      & lt; div class = "center" & gt; center div & lt; / div & gt;
      & lt; div class = "right" & gt; right div & lt; / div & gt;
    & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;
 

hãy chia nhỏ nó ra

  • Chúng tôi luôn xác định div cha bằng cách sử dụng display: flex để áp dụng Flexbox . Vì vậy, chúng tôi làm cho tất cả các con của div bên trong div cha có thể được xử lý bằng cách sử dụng thuộc tính Flexbox .
  • flex-direction sử dụng hàng theo mặc định, có nghĩa là các phần tử sẽ được đặt theo chiều dọc trong vùng chứa.
  • Với thuộc tính justify-content , chúng tôi có thể căn chỉnh div theo các hướng khác nhau như ví dụ sau:
 . container {
 hiển thị: flex:
 justify-content: center / * flex-start, flex-end, space-between, khoảng trắng-đều, khoảng trắng xung quanh, v.v. * /

}  
  • justify-content: center đặt các phần tử vào giữa vùng chứa.
  • justify-content : flex-start đặt các phần tử ở đầu vùng chứa ở bên trái.
  • justify-content: flex-end đặt các phần tử ở cuối vùng chứa ở phía bên phải.
  • justify-content: space-around làm cho các phần tử vừa với vùng chứa và tạo khoảng cách bằng nhau giữa tất cả các phần tử.
  • justify-content: space-đều phân phối các phần tử bên trong vùng chứa mẹ như nhau với cùng một không gian và cùng chiều rộng.

Ví dụ trên áp dụng cho tất cả các phần tử ' trẻ em như một nhóm.

Hãy tưởng tượng nếu chúng ta muốn căn chỉnh một div bên trong vùng chứa. Chúng tôi luôn có thể sử dụng align-self để căn chỉnh một phần tử.

 . Container div {
 align-self: center / * có thể có: flex-start, hoặc flex-end * /
}  

Chúng ta có thể áp dụng điều tương tự cho văn bản có Flexbox như trong ví dụ sau:

 
& lt; phong cách & gt;
.bên phải{
    hiển thị: flex;
    align-items: flex-end;
    flex-hướng: cột;
}
  
& lt; / style & gt;
& lt; div class = "right" & gt;
& lt; span & gt; right div & lt; / span & gt;
& lt; / div & gt;  

Đây là một bài tweet tuyệt vời của Julia Evans minh họa việc căn giữa trong CSS nói chung:

Wrap up

Có nhiều cách để căn giữa các phần tử trong CSS. Và bạn sẽ luôn học được những điều mới theo thời gian khi bạn thực hành ngày càng nhiều.

Vì vậy, tôi khuyên bạn nên xem qua một số ví dụ từ những gì bạn học được hôm nay để phù hợp.

  • Bạn nên theo dõi tôi Twitter ?
  • Xem Github của tôi
  • Truy cập Blog của tôi


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

Word Table Center Text Vertically AND Horizontally (2020)

  • Tác giả: Leon Renner
  • Ngày đăng: 2020-08-30
  • Đánh giá: 4 ⭐ ( 5877 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Word table center text. Wanna know how it's done? You'll learn how to put text in center of a table in Word. And of course you will be able to choose whether you want to center it vertically, horizontally or both! Oh, and we are talking about the centering of text in a cell here.

    This tutorial for center text in a table cell in Word should work for Word 2007, Word 2010, Word 2013, Word 2016, Word 2019 and also Office 365. This also works with Microsoft Office on a Mac and also with open source software such as OpenOffice or Libre Office.

    leonrenner

    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    💗 I need your support. Yes, YOU can help me (if you want it).

    If I helped you, I would really appreciate it if you subscribe to my channel, leave a comment 📝 and hit the like button 👍
    ► Subscription-Link: https://www.youtube.com/c/LeonRenner?sub_confirmation=1

Canh giữa theo cả chiều ngang và dọc trong CSS

  • Tác giả: webfaver.com
  • Đánh giá: 4 ⭐ ( 6758 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách canh giữa mọi thứ theo cả chiều dọc và chiều ngang bằng CSS, có thể áp dụng cho mọi loại element, layout,...

Bài 24: Bố cục CSS - Horizontal & Vertical Align

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 2936 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách căn giữa mọi thứ theo cả chiều dọc và chiều ngang bằng CSS, có thể áp dụng cho mọi loại element, layout, ...

Văn bản trung tâm CSS (theo chiều ngang và chiều dọc) bên trong một khối div

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5007 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nếu đó là một dòng văn bản và / hoặc hình ảnh, thì nó rất dễ…

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 ⭐ ( 4689 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 cách nào để căn giữa một div theo chiều dọc cho tất cả các trình duyệt?

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 3353 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu hỏi này đã có câu trả lời ở đây: Làm thế nào để div trung tâm theo chiều dọc? 17 câu trả lời Tôi muốn tập trung divtheo chiều dọc với CSS. Tôi không muốn…

Căn trung tâm text trong CSS đơn giản bằng mẹo dưới đây

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 1733 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS, để căn chỉnh Text nằm giữa theo chiều ngang thì chúng ta dùng thuộc tính text-align, còn căn theo chiều dọc thì dùng vertical-align. Còn để căn trung tâm text, hay nói cách khác là căn giữa cả chiều ngang và chiều dọc thì làm như dưới đây nhé !

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  Danh sách Python .append () - Cách thêm một mục vào danh sách bằng Python - cách nối danh sách trong python

By ads_php