디스플레이없이 고정 높이의 입력 필드 내에서 텍스트를 세로로 정렬 : 테이블 또는 패딩?

디스플레이없이 고정 높이의 입력 필드 내에서 텍스트를 세로로 정렬 : 테이블 또는 패딩?

---

line-height 속성은 일반적으로 수직 정렬을 처리하지만 입력은 처리하지 않습니다. 패딩을 사용하지 않고 텍스트를 자동으로 가운데에 배치하는 방법이 있습니까?

---

Opera 9.62, Mozilla 3.0.4, Safari 3.2 (Windows 용)에서는 입력 필드와 같은 줄에 텍스트 또는 공백을 입력하면 도움이됩니다.

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

(입력 문 뒤에 & nbsp를 상상해보세요)

IE 7은 내가 시도한 모든 CSS 해킹을 무시합니다. IE에만 패딩을 사용하는 것이 좋습니다. 하나의 특정 브라우저에서만 작동해야하는 경우 올바르게 배치하는 것이 더 쉬워야합니다.

---

나는이 문제에 직접 부딪쳤다. 입력 높이를 지정하지 않고 글꼴 높이와 패딩을 결합하면 텍스트가 세로로 정렬됩니다.

예를 들어 글꼴 크기가 20px 인 42px 높이의 입력 상자를 원한다고 가정 해 보겠습니다. 입력 높이와 글꼴 크기의 차이를 찾아 2로 나누고 패딩을 해당 양으로 설정하면됩니다. 이 경우 총 22px의 패딩이 있으며 각면에 11px입니다.

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

그러면 완벽한 수직 정렬을 가진 42px 높이의 입력 상자가 제공됩니다.

도움이 되었기를 바랍니다.

---

나는 이것을 직접 시도하지 않았지만 설정을 시도하십시오.

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

36px는 입력 높이입니다.

---

내가 파티에 늦었 음을 알고 있지만 모든 주요 브라우저에서 작동하는 간결한 답변을 찾는 모든 사람에게 도움이되기를 바랍니다. .

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

건배! JP

---

제 생각에는 가장 많은 표를 얻은이 페이지의 답변이 가장 좋은 답변이지만 그의 수학은 틀렸고 저는 그것에 대해 언급 할 수 없었습니다.

1 픽셀 테두리를 포함하여 정확히 40 픽셀 높이의 텍스트 입력 상자가 필요했습니다. 물론 모든 브라우저에서 텍스트를 중앙에 세로로 정렬하고 싶었습니다.

1 픽셀 테두리 상단
1 픽셀 테두리 하단
8 픽셀 상단 패딩
8 픽셀 하단 패딩
22 픽셀 글꼴 크기

1 + 1 + 8 + 8 + 22 = 정확히 40 픽셀.

기억해야 할 한 가지는 CSS 높이 속성을 제거해야한다는 것입니다. 그렇지 않으면 해당 픽셀이 위의 합계에 추가됩니다.

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

이것은 Firefox, Chrome, IE 8 및 Safari에서 작동합니다. 이와 같은 간단한 것이 IE8에서 작동하는 경우 6, 7, 9에서 유사하게 작동해야한다고 가정 할 수 있지만 테스트하지는 않았습니다. 알려 주시면 그에 따라이 게시물을 수정하겠습니다.

---

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

이것은 수직-중간 위치를 설정하는 올바른 방법입니다.

---

많은 검색과 좌절 끝에 텍스트 입력 필드에 고정 높이 (24px) 배경 이미지를 사용할 때 높이, 줄 높이 및 패딩 없음을 설정하는 조합이 저에게 효과적이었습니다.

.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;
}

---

시도해보십시오 :

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

IE의 일부 버전 (<9)에서는 속성 높이가 제대로 해석되지 않기 때문입니다.

---

대한 이동 line-height.

vertical-align태그는 버튼을 제출하지만 입력 필드에 텍스트에 대한 벌금을 작동합니다. line-height입력 필드 높이 설정 은 모든 브라우저에서 작동합니다. IE7 포함.

---

Just don't set the height of the input box, only set the font-size, that will be ok

---

This is how I do it.

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

then inside your CSS file,

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

That should work for you.

---

Late to the party, but the current answers won't work if you have box-sizing: border-box set (which a lot of people do for form elements these days).

Just reset the box sizing for IE8 to box-sizing: content-box; then use one of the padding / height answer.

---

The inner vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!!

Try some like :

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

...

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

Remember to adjust the values on css class according to your needs !

---

Sorry in advance the simple answer...

Just remove your title text and use the input placeholder for your label's title. Some visual and css work after that and your form will be looking tight and user friendly. I'm aware of the disadvantages but this will completely relieve the alignment wrestling.

I'm actually building one now that includes multi-step and css progress bar in WordPress...based off the ever popular Contact Form 7 plugin and it looks great. Let me know if you want a screenshot.

Cheers!

LaddtheImpaler

---

If your element is a block element contained/or with display like so:

display: table-cel

Or, with an fixed line-height, you can set the vertical align like so:

Vertical-Align: Middle;

It won't work for other cases, but it works fine on these conditions.

참고URL : https://stackoverflow.com/questions/326650/vertically-align-text-within-input-field-of-fixed-height-without-display-table