Căn chỉnh theo chiều dọc văn bản trong trường nhập có chiều cao cố định mà không có màn hình: bảng hay phần đệm?

Thuộc tính line-height thường quan tâm đến căn chỉnh theo chiều dọc, nhưng không quan tâm đến các đầu vào. Có cách nào để tự động căn giữa văn bản mà không cần sử dụng đệm không?

Trong Opera 9.62, Mozilla 3.0.4, Safari 3.2 (dành cho Windows) sẽ hữu ích nếu bạn đặt một số văn bản hoặc ít nhất một khoảng trắng trong cùng một dòng với trường nhập liệu.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(hãy tưởng tượng & nbsp sau câu lệnh đầu vào)

IE 7 bỏ qua mọi cách hack CSS mà tôi đã thử. Tôi khuyên bạn chỉ nên sử dụng padding cho IE. Sẽ giúp bạn dễ dàng định vị nó một cách chính xác nếu nó chỉ hoạt động trong một trình duyệt cụ thể.

Tôi đã tự mình gặp phải vấn đề này. Tôi thấy rằng việc không chỉ định chiều cao đầu vào mà sử dụng kết hợp chiều cao phông chữ và phần đệm, dẫn đến văn bản được căn chỉnh theo chiều dọc.

Ví dụ: giả sử bạn muốn có một hộp nhập liệu cao 42px, với kích thước phông chữ là 20px. Bạn có thể chỉ cần tìm sự khác biệt giữa chiều cao đầu vào và kích thước phông chữ, chia nó cho hai và đặt phần đệm của bạn thành số tiền đó. Trong trường hợp này, bạn sẽ có tổng giá trị của padding là 22px, mỗi bên là 11px.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

Điều đó sẽ cung cấp cho bạn một hộp nhập liệu cao 42px với căn chỉnh dọc hoàn hảo.

Hy vọng rằng sẽ giúp.

Tôi chưa tự mình thử điều này, nhưng hãy thử cài đặt:

height : 36px; //for other browsers
line-height: 36px; // for IE

Trong đó 36px là chiều cao của đầu vào của bạn.

Tôi biết mình đến muộn nhưng hy vọng điều này sẽ giúp ích cho bất kỳ ai đang tìm kiếm câu trả lời ngắn gọn hoạt động trên tất cả các trình duyệt chính (ngoại trừ IE6, chúng tôi đã quyết định ngừng hỗ trợ trình duyệt đó nên tôi từ chối xem xét nó nữa) .

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

chúc mừng! JP

Theo tôi, câu trả lời trên trang này với nhiều phiếu bầu nhất là câu trả lời hay nhất, nhưng phép toán của anh ấy đã sai và tôi không thể bình luận về nó.

Tôi cần một hộp nhập văn bản có chiều cao chính xác là 40 pixel, bao gồm cả đường viền 1 pixel. Tất nhiên tôi muốn văn bản được căn chỉnh theo chiều dọc ở giữa trong tất cả các trình duyệt.

1 pixel viền trên cùng
1 pixel viền dưới
8 pixel đệm trên cùng
8 pixel đệm dưới cùng
cỡ chữ 22 pixel

1 + 1 + 8 + 8 + 22 = 40 pixel chính xác.

Một điều cần nhớ là bạn phải xóa thuộc tính chiều cao css của mình nếu không những pixel đó sẽ được thêm vào tổng của bạn ở trên.

<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

Tính năng này hoạt động trên Firefox, Chrome, IE 8 và Safari. Tôi chỉ có thể giả định rằng nếu một cái gì đó đơn giản như thế này hoạt động trong IE8, thì nó sẽ hoạt động tương tự trong 6, 7 và 9 nhưng tôi chưa thử nghiệm nó. Vui lòng cho tôi biết và tôi sẽ chỉnh sửa bài đăng này cho phù hợp.

Đi cho line-height.

Các vertical-alignthẻ hoạt động tốt cho nút gửi nhưng không cho các văn bản trong lĩnh vực đầu vào. Cài đặt line-heightchiều cao của trường đầu vào hoạt động trên tất cả các trình duyệt. Bao gồm IE7.

Sau nhiều lần tìm kiếm và thất vọng, một kết hợp của thiết lập chiều cao, chiều cao dòng và không có đệm đã hoạt động với tôi khi sử dụng hình nền có chiều cao cố định (24px) cho trường nhập văn bản.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

đây là cách chính xác để đặt vị trí dọc-giữa.

Chỉ cần không đặt chiều cao của hộp nhập liệu, chỉ đặt kích thước phông chữ, điều đó sẽ ổn

Đây là cách tôi làm điều đó.

<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>

thì bên trong tệp CSS của bạn,

ul li {
  display: block;
  float: left;
}

Điều đó sẽ làm việc cho bạn.

Thử :

height: 21px;
line-height: 21px; /* FOR IE */

Bởi vì trên một số phiên bản IE (<9), chiều cao thuộc tính không được diễn giải đúng.

Đến bữa tiệc muộn, nhưng các câu trả lời hiện tại sẽ không hoạt động nếu bạn đã đặt box-sizing: border-box (điều mà nhiều người làm cho các phần tử biểu mẫu ngày nay).

Chỉ cần đặt lại kích thước hộp cho IE8 để box-sizing: content-box;sau đó sử dụng một trong các câu trả lời đệm / chiều cao.

Căn chỉnh theo chiều dọc bên trong sẽ phụ thuộc vào chiều cao phông chữ và chiều cao đầu vào, do đó, nó có thể được điều chỉnh bằng cách sử dụng đệm !!!

Hãy thử một số như:

.InVertAlign {
   height: 40px;
   line-height: 40px;
   font-size: 2em;
   padding: 0px 14px 3px 5px;
}

...

<input type="text" class="InVertAlign" />

Nhớ điều chỉnh các giá trị trên lớp css theo nhu cầu của bạn!

Tôi chỉ đang làm việc này trong đầu vào văn bản của MaterialUI. Thêm padding-top: 0.5remvào kiểu đầu vào phù hợp với tôi. Trong khi điều này đang điều chỉnh phần đệm, ít nhất bạn không cần phải lo lắng về việc điều chỉnh các bản cập nhật, ít điểm ngắt khác nhau hơn nhiều.

Bạn nên xóa văn bản tiêu đề của mình và sử dụng trình giữ chỗ đầu vào cho tiêu đề nhãn của bạn. Một số hình ảnh và CSS hoạt động sau đó và biểu mẫu của bạn sẽ trông chặt chẽ và thân thiện với người dùng. Tôi nhận thức được những bất lợi nhưng điều này sẽ giải tỏa hoàn toàn việc đấu vật liên kết.

Nếu phần tử của bạn là một phần tử khối chứa / hoặc hiển thị như vậy:

display: table-cel

Hoặc, với chiều cao dòng cố định, bạn có thể đặt căn chỉnh dọc như sau:

Vertical-Align: Middle;

Nó sẽ không hoạt động cho các trường hợp khác, nhưng nó hoạt động tốt trên các điều kiện này.