Question

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

以下jsfiddle显示了问题：https://jsfiddle.net/0yhhvhu7/1/

编辑：我认为我没有明确说明要求。我不想垂直对齐所有3列。第一列中的文本仍应位于顶部。第二列中的小矩形仍然应该位于顶部 - 但是对齐就好像它是＃34; - ＆＃34;第一列文本中的符号。最后一列中的第一行文本仍应位于顶部，其基线应与第一列中的文本基线匹配。

Answer 1

您也可以使用弹性框。使用flexbox，很多这样的任务变得容易多了。

您可以阅读更多相关信息here，并查看caniuse的优点browser support。

在您的情况下，这是一个有效的fiddle。关键是

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

在要进行对齐的容器上。

Answer 2

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

这是一个working solution我改变了很多种类以使其发挥作用。首先，我将内容定位为相对

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

我也改变了左边的div

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

使其与右侧div具有相同的高度。

现在我需要让时间和指示器在中间垂直对齐。为此，我将顶部位置设置为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 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>

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

3 个答案: