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

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

Using vertical align to align the text to the top of the div

html

css

vertical-alignment