Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Các khóa học /Frontend SELF VI /Căn chỉnh văn bản

Căn chỉnh văn bản

Frontend SELF VI
Mức độ , Bài học
Có sẵn

6.1 Thuộc tính text-align

Căn chỉnh văn bản — là một trong những yếu tố quan trọng nhất trong việc tạo kiểu cho trang web, cho phép điều khiển cách văn bản được sắp xếp trong các container. CSS cung cấp hai thuộc tính chính để căn chỉnh văn bản: text-align và vertical-align. Các thuộc tính này cho phép quản lý căn chỉnh ngang và căn chỉnh dọc của văn bản tương ứng.

Thuộc tính text-align quản lý căn chỉnh ngang của văn bản bên trong phần tử khối. Nó xác định cách văn bản được căn chỉnh so với các đường biên của phần tử.

Giá trị

  • left: căn văn bản theo lề trái (mặc định cho văn bản từ trái sang phải)
  • right: căn văn bản theo lề phải (mặc định cho văn bản từ phải sang trái)
  • center: căn giữa văn bản
  • justify: căn văn bản theo cả hai lề trái và phải, thêm khoảng trắng giữa các từ để phân phối đều văn bản trên toàn bộ chiều rộng của container
  • start: căn văn bản theo bắt đầu (lề trái hoặc phải tùy theo hướng văn bản)
  • end: căn văn bản theo kết thúc (lề phải hoặc trái tùy theo hướng văn bản)

Ví dụ sử dụng:

CSS 
    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }
HTML 
    
      <body>
        <p class="left">Đoạn văn này được căn lề trái.</p>
        <p class="right">Đoạn văn này được căn lề phải.</p>
        <p class="center">Đoạn văn này được căn giữa.</p>
        <p class="justify">Đoạn văn này được căn đều. Nó sẽ được kéo dài để chiếm toàn bộ chiều rộng của container.</p>
      </body>

6.2 Thuộc tính vertical-align

Thuộc tính vertical-align quản lý căn chỉnh dọc của phần tử theo dòng gốc của phần tử mẹ. Nó thường được sử dụng để căn chỉnh các phần tử nội tuyến, như hình ảnh, dòng văn bản hoặc bảng, theo chiều dọc trong dòng văn bản hoặc container khác.

Giá trị:

  • baseline: căn theo dòng gốc của phần tử mẹ (giá trị mặc định)
  • sub: căn như chỉ số dưới
  • super: căn như chỉ số trên
  • text-top: căn theo đỉnh phông chữ của phần tử mẹ
  • text-bottom: căn theo đáy phông chữ của phần tử mẹ
  • middle: căn theo giữa của phần tử mẹ
  • top: căn theo đỉnh của container
  • bottom: căn theo đáy của container
  • Giá trị phần trăm: dịch chuyển phần tử theo phần trăm được chỉ định so với chiều cao dòng

Ví dụ sử dụng:

CSS 
    
      .container {
        height: 100px;
        border: 1px solid #000;
      }

      .baseline {
        vertical-align: baseline;
      }

      .sub {
        vertical-align: sub;
      }

      .super {
        vertical-align: super;
      }

      .text-top {
        vertical-align: text-top;
      }

      .text-bottom {
        vertical-align: text-bottom;
      }

      .middle {
        vertical-align: middle;
      }

      .top {
        vertical-align: top;
      }

      .bottom {
        vertical-align: bottom;
      }

      .percent-50 {
        vertical-align: 50%;
      }
HTML 
    
      <body>
        <div class="container">
          <span class="baseline">baseline</span>
          <span class="sub">sub</span>
          <span class="super">super</span>
          <span class="text-top">text-top</span>
          <span class="text-bottom">text-bottom</span>
          <span class="middle">middle</span>
          <span class="top">top</span>
          <span class="bottom">bottom</span>
          <span class="percent-50">50%</span>
        </div>
      </body>
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION