버튼과 텍스트를 수직으로 정렬하려면 어떻게합니까?

HTML 배너 광고를 작성했으며 텍스트를 버튼과 수직으로 정렬하려고합니다. 내 예제에서 텍스트가 버튼 상단에 정렬되는 방법을 참조하십시오. 정확한 중간에 정렬하고 싶습니다.버튼과 텍스트를 수직으로 정렬하려면 어떻게합니까?

http://jsfiddle.net/3PTtv/62/

<div id="wrapper-landing"> 
<div class="box-row"> 
    <div class="box-form-body"> 
     <h4>See What You're Missing</h4> 
    </div> 
    <div class="box-form-button"> 
     <img src="http://www.ei.edu/wp-content/uploads/2013/03/button_submit.jpg" /></div> 
    </div> 
</div> 


#wrapper-landing { 
    width: 916px; 
    margin: 0 auto 50px auto; 
    padding: 0; 
} 

.box-form-body { 
    float: left; 
    display: block; 
    width: 75%; 
    padding: 0 0 0 2em; 
    border:1px solid #e2e3e4; 
} 

h4 { 
    font-size: 1.05em; 
    margin: 0 0 2px 0; 
    font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif; 
    font-weight: normal; 
} 

.box-form-button { 
    float: left; 
    display: block; 
    width: 15%; 
    border:1px solid #e2e3e4; 
    padding: 0 0 0 3em; 
} 

.box-row { 
    width:100%; 
    padding:10px; 
    border:1px solid #e2e3e4; 
    margin:0px; 
    overflow: hidden; 
    background-color:#f66511; 
}

출처

2014-02-27 user3075987

내 jsfiddle을 업데이트했습니다. http://jsfiddle.net/3PTtv/74/ 텍스트가 중간에 있지만 버튼은 없습니다. 배너보다 텍스트보다 높습니다. 버튼을 정확히 수직 중앙에 놓이게하려면 어떻게해야합니까? – user3075987

래퍼 <div> 요소의 디스플레이 유형을 inline-block으로 변경하고 가운데를 세로로 vertical-align: middle;으로 정렬 할 수 있습니다. 여기

당신은 이동 :

.box-form-body, .box-form-button { 
    display: inline-block; 
    vertical-align: middle; 
} 

.box-form-body { width: 75%; } 
.box-form-button { width: 15%; }

인라인 (- 블록) 요소 사이에 공백이 있다는 Working Demo

참고. 이 두 HTML 요소 사이에 공백 문자와 탭을 제거하여이를 수정했습니다.

또한 5px gap underneath the image이 있습니다. 이는 이미지 (인라인 요소)가 기본적으로 기준선에 정렬되기 때문입니다 (이 값은 줄 높이 예약 문자에 속합니다).

다음과 같이 이미지를 세로로 정렬하여 간격을 제거 할 수 있습니다

.box-form-button img { 
    vertical-align: bottom; 
}

Updated Demo합니다.

출처

2014-02-27 17:41:33

공백 문제에 대한 자세한 내용은 [이 답변] (http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532)을 참조하십시오. –

버튼이 정확한 수직 가운데가 아닙니다. 텍스트보다 높습니다. 정확한 중간에 그것을 어떻게 얻을 수 있습니까? – user3075987

@ user3075987 답변을 업데이트했습니다. –

http://jsfiddle.net/3PTtv/67/

이 CSS보십시오 :이 사용자의 요구에 맞게하지 않는 경우,

h4 { 
    font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif; 
    font-weight: normal; 
}

를 알려 주시면 내 대답과 JSFiddle 경우 편집합니다 필요한.

출처

2014-02-27 17:37:33

간단한 대답이 제공하는 것입니다 h4line-height :

h4 { 
    line-height: 2.4; 
}

Demo

또한 span에 포장하고 원하는 경우, 그것을 클래스 특정 라인 높이를 줄 수 나중에 사용하기 위해 원래의 h4 선 높이를 유지해야합니다.

출처

2014-02-27 17:44:45 Xareyo

버튼과 텍스트를 수직으로 정렬하려면 어떻게합니까?

답변

관련 문제