CSS顯示：當多行文本出現時，內嵌塊錯誤對齊

所有內容看起來都很好，並且可以像jsFiddle所顯示的那樣正常工作，但是如果向LOGIN SECTION框添加足夠的文本，要將文本分割成多行，推動外部2個標題塊不對齊。看起來好像我在中心框中添加文本，外框似乎放到文本結束的那一行。 I.E - 對多行進行「登錄部分」重複操作，並將外部框向下推。CSS顯示：當多行文本出現時，內嵌塊錯誤對齊

鏈接到正確的jsfiddle - 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

沒關係！我通過添加來修復它; vertical-align：top;給headerblock類 –

將行內塊元素的垂直對齊設置爲頂部。

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

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

來源

2013-06-19 22:30:52 Musa

謝謝！我剛剛完成了自己的工作，並試圖刪除我的帖子（我在帖子中添加了一條評論，說我已經用veritcal-align：top修復了它）感謝您的快速響應，並且在它允許我接受您的答案時在5分鐘內。 –

CSS顯示：當多行文本出現時，內嵌塊錯誤對齊

回答

相關問題