Html 如何垂直居中放置div和文本的第一行

我正在尝试创建3列。第一个是短的一行文字，第二个是小矩形，最后一个是多行文字，占据剩余宽度。小矩形必须在文本的第一行内垂直居中。我试图使用“垂直对齐”属性，如果第三列只有一行文本，它就可以正常工作，但如果有多行文本，它就不再工作了

下面是显示问题的

jsfiddle

：

---

编辑：我想我没有很清楚地描述需求。我不想垂直对齐所有3列。第一列中的文本仍应位于顶部。第二列中的小矩形仍应位于顶部，但对齐方式应与第一列文本中的“-”符号相同。最后一列中的第一行文本仍应位于顶部，其基线应与第一列中的文本基线相匹配。

如果希望指示器始终位于右侧文本的中间，这是一个解决方案

这是一个我改变了很多使它工作的类型。 首先我把内容定位到相对位置

.content{
    font-size: 20px;
    position:relative;
}

我也换了左div

.left{
    float: left;
    width: 70px;
    position:absolute;
    height:100%;
}

这样它就和右边的div一样高了

现在我需要让时间和指示器在中间垂直对齐。 为此，我将顶部位置设置为50%，并将利润顶部添加到-11px。这是在中间设置东西的一种可行的方式。< /P>

.time{
    position:absolute;
    top:50%;
    margin-top:-11px
}

.indicator{
    width: 6px;
    height: 6px;
    background-color: red;
    position:absolute;
    top:50%;
    margin-top:-2px;
    left:50px;
}

---

如果您希望它始终固定在特定高度，您还可以将顶部：50%更改为特定值，如10px。

您也可以使用弹性框来实现此目的。使用flexbox，许多类似的任务变得容易多了

你可以阅读更多关于它的内容，看看caniuse的精彩之处

这是你的一份工作报告。关键是

.content{
    display: flex;
    align-items: center;
    justify-content: center;
}

---

在要在其中进行对齐的容器上。

可以这样尝试。您只需使

显示：表格单元格

和

垂直对齐：中间

.content{
字体大小：20px；
}
.左{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：70px；
}
.对{
显示：表格单元格；
左边距：70像素；
}
.时间{
显示：内联块；
垂直对齐：中间对齐；
}
.指标{
宽度：6px；
高度：6px；
背景色：红色；
显示：内联块；
垂直对齐：中间对齐；
}

21:00
你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，

谢谢。我尝试了表格/表格单元格解决方案，但我希望第三列中文本的第一行与第一列中的文本对齐。