CSS 行内元素垂直对齐：单行文本与多行文本
在CSS布局中，如何使单行文本与多行文本在垂直方向上对齐是一个常见问题。例如，当单行文本位于多行文本左侧时，如何确保它们垂直居中？
问题描述：
如下图所示，如何使左侧单行文本“lorem ipsum”与右侧多行文本“placeholder”垂直对齐？
立即学习“前端免费学习笔记（深入）”；
解决方案：
解决这个问题的关键在于巧妙运用line-height属性。line-height属性定义元素的行高。通过设置合适的line-height值，可以使不同高度的元素在垂直方向上对齐。
在本例中，我们可以将包含“lorem ipsum”和“placeholder”的父元素的行高设置为与多行文本高度相近的值。例如：
.container {
line-height: 48px; /* 调整此值以适应多行文本高度 */
}
通过调整line-height值，可以精确控制垂直对齐效果。 需要注意的是，这个方法最适合单行文本与多行文本高度差异不大的情况。 如果高度差异过大，可能需要考虑其他更复杂的布局方案，例如使用Flexbox或Grid布局。
