CSS căn dọc
|
Sử dụng Show
The quick brown fox jumps over the lazy dog Dưới cùngSử dụng The quick brown fox jumps over the lazy dog Văn bản trên cùngSử dụng The quick brown fox jumps over the lazy dog Văn bản dưới cùngSử dụng The quick brown fox jumps over the lazy dog Áp dụng có điều kiệnHover, focus và các trạng thái khácTailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và các công cụ sửa đổi truy vấn phương tiện khác Sử dụng các giá trị tùy chỉnhGiá trị tùy ýNếu bạn cần sử dụng giá trị Thuộc tính căn chỉnh dọc CSS được sử dụng để xác định căn chỉnh dọc của hộp nội tuyến hoặc ô bảng. Nó là một trong những thuộc tính tự giải thích của CSS. Nó không phải là tài sản rất dễ dàng cho người mới bắt đầu Những gì nó làm
Giá trị căn dọc CSSvaluedescriptionbaselineNó căn chỉnh đường cơ sở của phần tử với đường cơ sở của phần tử cha. Đây là một giá trị mặc định. lengthNó được sử dụng để tăng hoặc giảm độ dài của phần tử theo độ dài đã chỉ định. giá trị âm cũng được cho phép. %Nó được sử dụng để tăng hoặc giảm phần tử theo phần trăm của thuộc tính "line-height". giá trị âm được cho phép. subIt căn chỉnh phần tử như thể nó là chỉ số dưới. superIt căn chỉnh phần tử như thể nó là chỉ số trên. topNó căn chỉnh đỉnh của phần tử với đỉnh của phần tử cao nhất trên dòng. bottomNó căn chỉnh phần dưới cùng của phần tử với phần tử thấp nhất trên dòng. văn bản ở đầu phần tử được căn chỉnh với phần trên cùng của phông chữ của phần tử gốc. phần tử trung gian được đặt ở giữa phần tử cha. text-bottom phần dưới cùng của phần tử được căn chỉnh với phần dưới cùng của phông chữ của phần tử cha. initIt đặt thuộc tính này thành giá trị mặc định của nó. inheritinherits thuộc tính này từ phần tử cha của nóVí dụ về căn dọc CSSKiểm tra nó ngay bây giờđầu ra  Định tâm các phần tử theo chiều dọc bằng CSS thường gây rắc rối. Tuy nhiên, có một số cách định tâm theo chiều dọc và mỗi cách đều dễ sử dụng Thuộc tính vertical-align được sử dụng để căn giữa các phần tử nội tuyến theo chiều dọc Các giá trị của thuộc tính vertical-align căn chỉnh phần tử so với phần tử cha của nó
Ví dụ về căn chỉnh văn bản theo chiều dọcVới Flexbox, có thể căn chỉnh các phần tử theo chiều dọc (hoặc chiều ngang) với các thuộc tính align-items, align-self và justify-content Để tìm hiểu cách tạo bố cục linh hoạt được tối ưu hóa cho nhiều thiết bị, hãy đọc Hướng dẫn Flexbox của chúng tôi Ví dụ về căn chỉnh văn bản theo chiều dọc với FlexboxVới thuộc tính hiển thị, chúng tôi sẽ đặt các thành phần thành "bảng" và "ô bảng". Căn giữa nội dung với thuộc tính vertical-align Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính hiển thị CSSThêm thuộc tính line-height vào phần tử chứa văn bản lớn hơn kích thước phông chữ của nó. Theo mặc định, các khoảng trắng bằng nhau sẽ được thêm vào bên trên và bên dưới văn bản và bạn sẽ nhận được văn bản được căn giữa theo chiều dọc Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính CSS line-heightVí dụ sau hoạt động cho một văn bản có một và nhiều dòng. Tuy nhiên, nó yêu cầu thùng chứa có chiều cao cố định Ví dụ về căn chỉnh văn bản theo chiều dọc bằng cách sử dụng thuộc tính chiều cao dòng CSS với vùng chứa chiều cao cố địnhKhi canh dọc văn bản với thuộc tính padding, chúng ta phải đặt phần đệm trên và dưới của phần tử cha bằng nhau Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính đệm CSSKhi đặt phần đệm, hãy sử dụng % để giúp chúng phát triển linh hoạt. Phương pháp này yêu cầu một số tính toán để hiểu những giá trị nào cần thiết ở trên cùng và dưới cùng, để chúng có thể phát triển linh hoạt. Nếu bạn đặt chiều cao thành "tương đối" thì sẽ không cần tính toán Chúng ta có thể căn chỉnh văn bản theo chiều dọc với các thuộc tính vị trí và lề CSS được sử dụng với các phần tử cấp khối. Đừng quên đặt chiều cao của phần tử mà bạn muốn căn giữa
Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính vị trí và lề CSSNếu nội dung vượt quá vùng chứa, nó sẽ biến mất một cách trực quan Bằng cách đặt vị trí tuyệt đối và kéo dài, chúng tôi hướng dẫn trình duyệt tự động đặt lề của phần tử con sao cho chúng trở nên bằng nhau
Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính vị trí CSSKhi chúng ta có vị trí. tuyệt đối, hàng đầu. 50%, còn lại. 50%, các tính toán được thực hiện bắt đầu từ góc trên bên trái. Để định vị văn bản ở giữa, chúng ta phải “di chuyển” nó -50% sang trái và 50% lên trên bằng cách thiết lập biến đổi. dịch (-50%; -50%) |
