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 text vertical align

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:

Xem Thêm  Mảng trong JavaScript - tạo một mảng js

< 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ủ đề căn chỉnh dọc văn bản div

CSS display: inline-block Explained By Creating a Grid

  • Tác giả: SyntaxByte
  • Ngày đăng: 2017-07-29
  • Đánh giá: 4 ⭐ ( 5076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Inline block is a very useful CSS display property value with good browser support that can be used to layout elements such as navbars, grids or even entire webpages.

    In this video, you can learn not only how to create a responsive grid using this technique, but also properties and hacks unique to 'display: inline-block' such as vertical-align, text-align and font-size. Using the knowledge found in this video, you will be able to create excellent layouts on the web with little headache and good browser support.

    The full CSS & HTML source code for this video is available as part of the written tutorial at: https://syntaxbytetutorials.com/css-display-inline-block-explained-by-creating-a-grid/

Hướng dẫn căn chỉnh lề theo chiều dọc trong word 2016 -gacongnghe.com

  • Tác giả: gacongnghe.com
  • Đánh giá: 3 ⭐ ( 1715 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn căn chỉnh lề theo chiều dọc trong word 2016, huong dan can chinh le theo chieu doc tren word 2016.

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

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 6153 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, ...

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

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 3350 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...

Làm cách nào để căn chỉnh theo chiều dọc văn bản trong một div?

  • Tác giả: vi.gtainspections.com
  • Đánh giá: 3 ⭐ ( 8604 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố gắng tìm cách hiệu quả nhất để căn chỉnh văn bản với một div. Tôi đã thử một vài điều và dường như không có hiệu quả. .testimonialText {vị trí: tuyệt đối; trái: 15px; đầu trang: 15px; ...

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

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

CSS Alignment - Tự học CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 8893 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay bạn sẽ được học về các phương pháp căn chỉnh CSS phổ biến và 3 giải pháp clear float mà đã làm bao nhiêu lập trình viên đau đầu.

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