CSS 표시 : 멀티 라인 텍스트가있을 때 인라인 블록이 잘못 정렬됩니다.

jsFiddle이 보여 주듯이 모든 것이 잘 보이고 작동하지만 LOGIN SECTION 상자에 충분한 텍스트를 추가하면 텍스트를 여러 줄로 나눌 수 있습니다. 바깥 쪽 2 헤더 블록을 정렬 밖으로 밀어냅니다. 마치 가운데 상자에 텍스트를 추가하면 외부 상자가 텍스트가 끝나는 행으로 떨어지는 것처럼 보입니다. I.E - 여러 줄에 대해 "로그인 섹션"을 반복하고 외부 상자를 아래로 밀어 넣습니다. jsFiddle를 해결하기 위해CSS 표시 : 멀티 라인 텍스트가있을 때 인라인 블록이 잘못 정렬됩니다.

링크 - http://jsfiddle.net/d7xXB/

HTML

<body> 
<div class="wrapper"> 
<div class="headerblock">Logo 1 Here</div> 
<div class="headerblockmiddle">Login Section Login Section Login Section Login Section Login Section</div> 
<div class="headerblock">Logo 2 Here</div> 
</div> 
</body>

CSS

* { 
margin: 0; 
padding: 0; 
} 
.wrapper { 
-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75); 
-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75); 
box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
width:800px; 
min-height:550px; 
margin-left: auto; 
margin-right: auto; 
background-color:#FFF; 
margin-top:10px; 
padding: 5px; 
position:relative; 
display:block; 
text-align:center; 
} 
body { 
background-color: #2a8dba; 
} 
.headerblock { 
position: relative; 
margin: 0 auto; 
display:inline-block; 
height: 85px; 
width: 200px; 
background-color:#CCC; 
padding: 0px; 
/* For IE 7 */ 
zoom: 1; 
*display: inline; 
} 
.headerblockmiddle { 
position: relative; 
margin: 0 auto; 
display:inline-block; 
height: 85px; 
width: 370px; 
background-color:#CCC; 
padding: 0px; 
/* For IE 7 */ 
zoom: 1; 
*display: inline; 
}

어떤 도움을 크게, 감사 감사합니다.

출처

2013-06-19 Kevin Ife

걱정하지 마라! 나는 그것을 첨가함으로써 그것을 고쳤다. 세로 정렬 : 위쪽; 헤더 블록 클래스 –

인라인 블록 요소의 수직 정렬을 위로 설정합니다.

.headerblockmiddle { 
    ... 
    display:inline-block; 
    vertical-align:top; 
    ... 
}

http://jsfiddle.net/d7xXB/2/

출처

2013-06-19 22:30:52 Musa

에 감사드립니다! 나는 방금 나 자신을했고 내 글을 삭제하려고 시도했다. (내 게시물에 veritcal-align : top으로 수정했다는 말을 덧붙였다.) 빠른 응답을 주셔서 감사 드리며 대답 해 주시면 5 분. –

CSS 표시 : 멀티 라인 텍스트가있을 때 인라인 블록이 잘못 정렬됩니다.

답변

관련 문제