垂直中心垂直文本

我有一些垂直文本，我不能在它們的div內縱向居中。下面是一個示例：http://jsfiddle.net/hThGb/2657/垂直中心垂直文本

請參閱3個div（2個橙色和1個紅色）。 div內的文本不是垂直居中的，這使得文本泄漏到div之外。

我已經試過vertical-align: middle但那不會做任何事情。

我該如何垂直垂直文本里面的垂直文本？

來源

2013-10-08 alexandernst

如果您在boxes裏面的文字可以在一行中，您可以使用line-height屬性垂直對齊它們。

使用line-height:(height of the container)

JS Fiddle Demo

來源

2013-10-08 09:43:33 Sachin

這種作品，但是當我點擊文本（展開div）時，文本會移出divs。編輯：忘掉我說的話，它可以正常工作'''float：right;'':) :) – alexandernst

@alexandernst這是一個浮動問題。這是一個更新http://jsfiddle.net/hThGb/2662/ – Sachin

還是一種越野車。左上角的文字是「罪惡的」（有空格）。如果我刪除空間，一切都正確顯示，但如果我添加空間，一切都會中斷。 – alexandernst

-1

您可以使用padding爲三個div的

來源

2013-10-08 10:00:55

有一種方法，使文本（文本多），一個未知的高度容器內垂直居中。

訣竅是使用100％容器高度的僞內容，設置爲display:inline-block。而你的子元素也必須display:inline-block;

HTML

<div> 
    <p>texts online line</p> 
</div> 
<div> 
    <p>texts will be shown in two lines, lorem ipsum doilor sit amet conse </p> 
</div> 

<div class="last"> 
    <p>texts will be shown in three lines, lorem ipsum doilor sit amet conse lorem ipsum dolor sit </p> 
</div>

CSS

div { 
    background:#bababa; 
    padding:10px; 
    width:260px; 
    height:100px; 
    margin:0 0 10px; 
} 

.last { 
    height:200px; 
} 

div > p { 
    margin:0; 
    display:inline-block; 
    vertical-align:middle; 
    width:100%; 
} 

div:before { 
    content:""; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
    width:0px; 
    font:0/0 a; 
    margin-left:-4px; 
}

Fiddle Demo

如何工作

所有display:inline-block元素在同一個兄弟姐妹中會對CSS的vertical-align屬性做出反應;僞元素將佔據容器高度的100％，其他元素將對此作出反應！所以你可以垂直居中在中間或底部或頂部。

來源

2013-10-08 10:34:08

你錯過了我的問題。我要求垂直排列的垂直*文本。 – alexandernst

Gotcha，lemme返工。 –

如適用於#chathere現在可以很容易地用flexbox來做到這一點。

來源

2017-07-10 11:00:20 Gerard

垂直中心垂直文本

回答

相關問題