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

Question

我正在嘗試使用vertical-align：top將文本與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> 

Answer 1

您需要在文本元素而非容器上設置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>