Cách căn giữa văn bản theo chiều dọc trong các nút và phần tử đầu vào bằng cách sử dụng thuộc tính CSS padding và line-height.

Bạn đang xem : căn chỉnh tâm nút theo chiều dọc

Bạn đã bao giờ gặp khó khăn với việc căn chỉnh nội dung của các phần tử tương tác của mình theo chiều dọc chưa? Bạn đang ở trong một công ty tốt. Rất nhiều người trong chúng tôi làm như vậy.

Trong bài viết này, chúng ta sẽ xem xét cách căn giữa nội dung của các nút và phần tử đầu vào bằng cách sử dụng chiều cao dòng, phần đệm và hộp uốn.

⚡️ Thiết kế nhanh hơn 10 lần với thư viện COMP_NUM thành phần của chúng tôi →

Vậy, mục tiêu của chúng tôi ở đây là gì?

Chúng tôi muốn xây dựng một hệ thống ở đó:

  1. nội dung của các nút và phần tử đầu vào được căn chỉnh hoàn hảo
  2. các nút và phần tử đầu vào có cùng chiều cao
  3. kích thước phông chữ, chiều cao dòng, phần đệm và đường viền xác định kích thước của các nút và đầu vào *

* Một cách tiếp cận thay thế sẽ là đặt chiều cao cố định (ví dụ: height: 40px; ) và chiều cao dòng bằng giá trị chiều cao (ví dụ: line-height: 40px; ) cho tất cả các nút và đầu vào. Tuy nhiên, sử dụng phần đệm (thay vì chiều cao cố định) sẽ an toàn hơn vì nút sẽ thích ứng với nội dung của nó trong mọi trường hợp.

Nút cơ bản và kiểu nhập #

Chiều cao và căn chỉnh theo chiều dọc của các nút và đầu vào được xác định bằng sự kết hợp của đường viền, phần đệm, kích thước phông chữ và chiều cao dòng.

các yếu tố ảnh hưởng đến nút / chiều cao đầu vào

Với ý nghĩ đó, hãy xác định kiểu cơ bản của các nút và đầu vào:

  & lt; input class = "form-control" type = "text" value = "Phần tử đầu vào" & gt;
& lt; button class = "btn" & gt; Nút & lt; / button & gt;

& lt; phong cách & gt;
  .btn, .form-control {
    / * đặt lại biểu định kiểu tác nhân người dùng * /
    background-color: trong suốt;
    đệm: 0;
    viền: 0;
    bán kính đường viền: 0;
    color: kế thừa;
    ngoại hình: không có;

    / * đảm bảo các thuộc tính ảnh hưởng đến chiều cao có cùng giá trị * /
    cỡ chữ: 1em;
    chiều cao dòng: 1,2;
    đệm: 0.5em var (- padding-x);
    border-width: 2px;
    border-style: chắc chắn;
  }
  
  /* cái nút */
  .btn {
    hiển thị: inline-flex;
    justify-content: trung tâm; / * căn giữa nội dung theo chiều ngang * /
    align-các mục: trung tâm; / * căn giữa nội dung theo chiều dọc * /
    --padding-x: 1,2em;
    viền-màu: trong suốt; / * ẩn đường viền nút * /
  }
  
  /* đầu vào */
  .form-control {
    --padding-x: 0,5em;
  }
& lt; / style & gt;  

Điểm rút ra từ đoạn mã trên:

  • Chúng tôi đặt giá trị hiển thị của các nút bằng inline-flex để chúng tôi có thể sử dụng thuộc tính justify-content và align-items để căn giữa nội dung (đặc biệt hữu ích nếu bạn đặt một biểu tượng bên trong một nút).
  • Chúng tôi áp dụng cùng một khoảng đệm dọc, kích thước phông chữ, chiều cao dòng và chiều rộng đường viền cho các nút và đầu vào.

  • Điều khó khăn là chúng tôi không có kế hoạch thêm đường viền hiển thị cho các nút, chúng tôi vẫn áp dụng nó (với màu trong suốt) để đảm bảo các nút và đầu vào có cùng chiều cao.
  • Giá trị chiều cao dòng cần lớn hơn “1” một chút

    . Nếu bạn sử dụng “1”, các phần tử đầu vào sẽ không chấp nhận nó và chúng sẽ cao hơn các nút. Trong ví dụ của chúng tôi, chúng tôi đang áp dụng “1,2” (bạn có thể sử dụng “bình thường” nếu muốn).

Kiểu cơ bản này sẽ đảm bảo các nút và phần tử đầu vào có cùng chiều cao và nội dung của chúng được căn chỉnh theo chiều dọc. Bạn có thể sửa đổi kích thước phông chữ của chúng (ví dụ: đặt kích thước phông chữ cố định) hoặc áp dụng một họ phông chữ khác và nó sẽ không ảnh hưởng đến việc căn chỉnh. Xét cho cùng, chúng tôi chỉ đang đẩy nội dung bằng cách sử dụng đệm và đường viền.

Bạn cũng có thể tăng / giảm quy mô chúng bằng cách tận dụng các đơn vị Em.

Làm cho chúng xinh đẹp #

Tất cả những gì còn lại cần làm là tạo một chủ đề riêng cho các nút và thông tin đầu vào của chúng tôi:

Có thể có những trường hợp chúng tôi cần đặt chiều cao cố định cho các phần tử nút / đầu vào của mình và chiều cao dòng mặc định sẽ phá vỡ sự liên kết.

Trong những trường hợp như vậy, chúng tôi có thể xóa phần đệm dọc và đặt chiều cao dòng bằng giá trị chiều cao.

Đây là cách giải quyết dựa trên việc tạo các lớp tiện ích chiều cao hoạt động hơi khác khi áp dụng cho các nút và đầu vào:

 . height-30, .height-40, .height-50 {
  chiều cao: var (- height);

  & amp; .btn, & amp; .form-control {
    line-height: var (- height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 {
  - chiều cao: 30px;
}

.height-40 {
  - chiều cao: 40px;
}

.height-50 {
  - chiều cao: 50px;
} 

Bạn có sử dụng một phương pháp khác mà bạn muốn chia sẻ không? Hãy cho chúng tôi biết trên Twitter !


Xem thêm những thông tin liên quan đến chủ đề căn chỉnh tâm nút theo chiều dọc

Cách Soạn Câu Theo Vòng Hoà Âm TONE TRƯỞNG | Ku Tèo Piano.

  • Tác giả: KU TÈO PIANO
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 4126 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 -gacongnghe.com

  • Tác giả: gacongnghe.com
  • Đánh giá: 5 ⭐ ( 1775 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.

Cách căn giữa văn bản theo chiều dọc trên trang trong Microsoft Word / làm thế nào để

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 3 ⭐ ( 6033 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cần tạo một trang bìa cho một báo cáo bạn đang viết? Bạn có thể tạo một trang bìa đơn giản nhưng chuyên nghiệp bằng cách căn giữa văn bản theo chiều ngang và chiều dọc. Định tâm văn bản theo chiều ngang trên một trang là dễ dàng, nhưng theo chiều dọc? Điều đó cũng dễ dàng và chúng tôi sẽ chỉ cho bạn cách.

Để căn giữa theo chiều ngang và căn giữa theo chiều đúng của trang em thực hiện như thế nào

  • Tác giả: mtrend.vn
  • Đánh giá: 4 ⭐ ( 9977 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để căn giữa theo chiều ngang và căn giữa theo chiều đúng của trang em thực hiện như thế nào

Làm cách nào để căn giữa một nút trong Bootstrap?

  • Tác giả: vi.helpr.me
  • Đánh giá: 5 ⭐ ( 8408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

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

Trung tâm căn chỉnh dọc trong Bootstrap 4

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5093 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Quan trọng! Trung tâm dọc tương đối với chiều cao của cha mẹ Nếu cha mẹ…

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  Active Record Query Interface — Ruby on Rails Guides - active record

By ads_php