使用垂直对齐将文本对齐到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>