使用垂直對齊將文本對齊div頂部

我試圖使用vertical-align：top將文本對齊到div頂部，但由於某種原因它不起作用。我究竟做錯了什麼？使用垂直對齊將文本對齊div頂部

#outer { 
 
border: 1px solid black; 
 
width: 100%; 
 
height: 100%; 
 
vertical-align: top; 
 
} 
 
img { 
 
display: inline-block; 
 
} 
 
#message { 
 
display: inline-block; 
 
width: 50%; 
 
}

<div id = 'outer'> 
 
<img src = "https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg"> 
 
<div id = 'message'> 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
message message message 
 
</div> 
 
</div>

來源

2016-01-10 frosty

您需要設置vertical-align文本元素，而不是在容器上。 vertical-align指令在上下文中對齊元素，但不影響元素的父項。

工作現場演示：

#outer { 
 
    border: 1px solid black; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
img { 
 
    display: inline-block; 
 
} 
 
#message { 
 
    display: inline-block; 
 
    width: 50%; 
 
    vertical-align: top; 
 
}

<div id='outer'> 
 
    <img src="https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg"> 
 
    <div id='message'> 
 
    message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message 
 
    message message message message 
 
    </div> 
 
</div>

來源

2016-01-10 03:13:31

由於文本對齊是假設父被放，這整個垂直對齊的事情只是把我趕走。我認爲這是假設以同樣的方式工作。 – frosty

@frosty是的，CSS是一個善變的野獸。垂直對齊的MDN頁面：https：//developer.mozilla.org/en-US/docs/Web/CSS/vertical-align –

使用垂直對齊將文本對齊div頂部

回答

相關問題