CSS : "div"안에 "라벨"과 "입력"을 수직으로 정렬하는 방법은 무엇입니까?

CSS : "div"안에 "라벨"과 "입력"을 수직으로 정렬하는 방법은 무엇입니까?

---

다음 코드를 고려하십시오 .

HTML :

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS :

div {
    height: 50px;
    border: 1px solid blue;
}

label및을 (세로) input중간에 두는 가장 쉬운 방법은 무엇입니까 div?

---

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

이 방법의 장점은의 높이를 div변경하고 텍스트 필드의 높이를 변경하고 글꼴 크기를 변경할 수 있으며 모든 것이 항상 중간에 유지된다는 것입니다.

http://jsfiddle.net/53ALd/6/

---

보다 현대적인 접근 방식은 CSS 플렉스 박스를 사용하는 것입니다.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

더 복잡한 예 ... 플렉스 흐름에 여러 요소가있는 경우 align-self를 사용하여 단일 요소를 지정된 정렬과 다르게 정렬 할 수 있습니다.

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

또한 수평 및 수직으로 중앙에 쉽게 배치 할 수 있습니다.

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

---

This works cross-browser, provides more accessibility and comes with less markup. ditch the div. Wrap the label

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

---

I'm aware this question was asked over two years ago, but for any recent viewers, here's an alternative solution, which has a few advantages over Marc-François's solution:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

Here we simply only add a line-height equal to that of the height of the div. The advantage being you can now change the display property of the div as you see fit, to inline-block for instance, and it's contents will remain vertically centered. The accepted solution requires you treat the div as a table cell. This should work perfectly, cross-browser.

The only other advantage being it's just one more CSS rule instead of two :)

Cheers!

---

Use padding on the div (top and bottom) and vertical-align:middle on the label and input.

example at http://jsfiddle.net/VLFeV/1/

---

Wrap the label and input in another div with a defined height. This may not work in IE versions lower than 8.

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

---

You can use display: table-cell property as in the following code:

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }

참고URL : https://stackoverflow.com/questions/4466596/css-how-to-align-vertically-a-label-and-input-inside-a-div