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

Program / 글쓴이

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

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>

스 니펫 확장

답변

이것은 브라우저간에 작동하고 더 많은 접근성을 제공하며 마크 업이 적습니다. 사업부를 버리십시오. 라벨 포장

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>

답변

이 질문이 2 년 전에 요청되었다는 것을 알고 있지만 최근 시청자의 경우 Marc-François의 솔루션보다 몇 가지 장점이있는 대체 솔루션이 있습니다.

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

여기 line-height에서는 div의 높이와 동일한 값만 추가합니다 . 장점은 inline-block예를 들어 div의 표시 속성 을 예를 들어 적합하다고 생각되면 변경할 수 있으며 내용이 세로 중앙에 유지된다는 것입니다. 허용되는 솔루션을 사용하려면 div를 테이블 셀로 취급해야합니다. 브라우저 간 완벽하게 작동합니다.

유일한 다른 장점은 두 개가 아닌 하나의 CSS 규칙이라는 것입니다. 🙂

건배!

답변

사용 padding상의 div( 상단 및 하단 )와 vertical-align:middle상의 label하고 input.

http://jsfiddle.net/VLFeV/1/의 예

답변

레이블과 입력을 정의 된 높이로 다른 div에 래핑합니다. 8 미만의 IE 버전에서는 작동하지 않을 수 있습니다.

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

답변

display: table-cell다음 코드와 같이 속성을 사용할 수 있습니다 .

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