Căn chỉnh văn bản: CSS trung tâm

Để đặt căn chỉnh văn bản trong HTML, hãy sử dụng thuộc tính style. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử. Thuộc tính được sử dụng với HTML

thẻ, với thuộc tính CSS text-align cho căn giữa, căn trái và căn phải. HTML5 không hỗ trợ thuộc tính căn chỉnh của

thẻ, vì vậy kiểu CSS được sử dụng để đặt căn chỉnh văn bản

Chỉ cần ghi nhớ, việc sử dụng thuộc tính style sẽ ghi đè bất kỳ kiểu nào được đặt trên toàn cầu. Nó sẽ ghi đè bất kỳ kiểu nào được đặt trong HTML

Đị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ó

• Các giá trị liên quan đến dòng sắp xếp theo chiều dọc một phần tử so với toàn bộ dòng
• Các giá trị cho các ô của bảng có liên quan đến thuật toán chiều cao của bảng, thuật toán này thường đề cập đến chiều cao của hàng

Ví dụ về căn chỉnh văn bản theo chiều dọc

  
    Title of the document
    
  
  
    
Vertically aligned text
  

Vớ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 Flexbox

  
    Title of the document
    
  
  
    

      
 I'm centered with Flexbox!

Vớ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ị CSS

  
    Title of the document
    
  
  
    

      
I am vertically centered
    

  

Thê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-height

  
    Title of the document
    
  
  
    
I am vertically centered
  

Ví 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ố định

  
    Title of the document
    
  
  
    
I am vertically centered
  

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

  
    Title of the document
    
  
  
    

      
I am vertically centered.
    

  

Khi đặ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

1. Đặt vị trí thành "tương đối" cho lớp "cha" và "tuyệt đối" cho lớp "con_1" và "con_2"
2. Đặt cả thuộc tính trên cùng và bên trái thành 50% để căn giữa góc bên trái của con

   .

3. Đặt chiều rộng và chiều cao của trẻ

   các phần tử theo một cách để nó sẽ được di chuyển lên trên và sang trái

4. Đưa ra một lề âm, làm giảm một nửa chiều cao và chiều rộng

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

  
    Title of the document
    
  
  
    

      
Vertically Centered Text




    



Not Centered Text

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

1. Đặt vị trí cho cha mẹ thành "tương đối" và cho con, đặt thành "tuyệt đối"
2. Đặt thuộc tính top, bottom, left, right cho con
3. Đặt lề thành "tự động" để làm cho tất cả các lề bằng nhau và làm cho phần tử con

   được căn giữa theo chiều dọc cũng như chiều ngang

Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính vị trí CSS

  
    Title of the document
    
  
  
    

      
Example
    

  

Khi 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%)