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

Question

我正在尝试创建3列。首先是简短的一行文本，其次是小矩形和最后一个占用剩余宽度的多行文本。小矩形必须在第一行文本中垂直居中。我试图使用“vertical-align”属性，如果第三列只有单行文本，但它有多行文本不再有效，它就可以正常工作。

这里是jsfiddle这说明问题：https://jsfiddle.net/0yhhvhu7/1/

编辑：我觉得我没有描述的要求非常明确。我不想垂直对齐所有3列。第一列的文字仍然位于最上方。第二列中的小矩形仍应位于顶部 - 但与第一列文本中的“ - ”符号对齐。最后一列中的第一行文字仍然位于最上方，其基线应与第一列中的文字基线相匹配。

Answer 1

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

这是一个working solution我改变了种类很多，使其工作。 首先，我所做的内容位置相对

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

，我也改变了左格

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

，使其具有相同的高度，正确的股利。

现在我需要使时间和指标在中间垂直对齐。 为此，我将顶端位置设置为50％，并将边距顶部添加到-11px。这是一个可行的方式来设置中间的东西。

.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的特定值。

Answer 2

您也可以为此使用弹性盒。使用flexbox，许多类似的任务变得更加容易。

你可以阅读更多关于它here，并看到很不错的browser support caniuse。

这里是一个工作fiddle你的情况。关键是

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

在您想要进行对齐的容器上。

Answer 3

你可以尝试这样。你只要display:table-cell和vertical-align: middle

.content{ 
 
    font-size: 20px; 
 
} 
 
.left { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 70px; 
 
} 
 

 
.right{ 
 
    display: table-cell; 
 
    margin-left: 70px; 
 
} 
 

 
.time{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.indicator{ 
 
    width: 6px; 
 
    height: 6px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="content"> 
 
    <div class="left"> 
 
     <div class="time">21:00</div> 
 
     <div class="indicator"></div> 
 
    </div> 
 
    <div class="right"> 
 
      <div class="label">Hello World, Hello World, Hello World, Hello World, Hello World, Hello World, Hello World, Hello World, Hello World, Hello World, Hello World,</div> 
 
    </div> 
 
</div>