如何垂直居中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>