使用垂直对齐将文本对齐到div的顶部

Question

I'm trying to use vertical-align: top to align the text to the top of the div, but it's not working for some reason. What am I doing wrong?

 #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

You need to set vertical-align on the text element rather than the container. The vertical-align directive aligns an element within a context, it doesn't affect the element's parents.

Working Live Demo:

 #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>