容器內部垂直居中無花果標題

Question

我有這塊含有圖片和文字的html。我想垂直居中無花果標題，並能夠在多行上顯示。我無法弄清楚。已經嘗試過表格技術和內聯塊。

這是一個演示問題的小提琴。

jsfiddle.net/qb72szt2/

編輯：代碼。

<div class="set"> 
<figure> 
    <img src="http://placehold.it/141x141"> 
    <figcaption>Lorem ipsum dolor sit amet</figcaption> 
</figure> 
<figure> 
    <img src="http://placehold.it/141x141"> 
    <figcaption>Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet</figcaption> 
</figure> 
<figure> 
    <img src="http://placehold.it/141x141"> 
    <figcaption>Lorem ipsum dolor sit amet</figcaption> 
</figure> 

.set { 
    float: left; 
    position: relative; 
    width: 100%; 
} 

figure { 
    width:100%; 
    float:left; 
} 

img { 
    float: right; 
    max-width: 141px; 
    width: 50%; 
    display:block; 
} 

figcaption { 
    color: #83786c; 
    width: 50%; 
} 

Answer 1

也許是讓它表現得像一個表的選項？

所以設置數字爲display：table; and img and ficaption to display：table-cell; 由於表格的性質，外觀順序很重要。因此，我將ficaption換成源代碼之前的img。

查看下面的代碼或更新的小提琴http://jsfiddle.net/qb72szt2/1/。

.set { 
 
    float: left; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
figure { 
 
    display: table; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
img { 
 
    max-width: 141px; 
 
    width: 50%; 
 
    display: table-cell; 
 
} 
 
figcaption { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: #83786c; 
 
    width: 50%; 
 
}

<div class="set"> 
 
    <figure> 
 
    <figcaption>Lorem ipsum dolor sit amet</figcaption> 
 
    <img src="http://placehold.it/141x141"> 
 
    </figure> 
 
    <figure> 
 
    <figcaption>Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet</figcaption> 
 
    <img src="http://placehold.it/141x141"> 
 
    </figure> 
 
    <figure> 
 
    <figcaption>Lorem ipsum dolor sit amet</figcaption> 
 
    <img src="http://placehold.it/141x141"> 
 
    </figure> 
 
</div>

Answer 2

試試這個：

1. 移動position: relative規則figure定位
2. 使用絕對postitioning上figcaption，即
3. 使用transform : translate因此，如果figcaption包含很多文字將適當地流離失所。

figure { 
    width:100%; 
    float:left; 
    position: relative; 
} 

figcaption { 
    position: absolute; 
    top: 50%; 
    /* I added this tranform in so final positions can be tweaked */ 
    transform: translate(0,-50%); 
    color: #83786c; 
    width: 50%; 
} 

這裏是文字你的提琴包含了很多的更新 - http://jsfiddle.net/889qu538/

Answer 3

如果您知道有關figcaption的高度，那麼你可以使用鬼元技術垂直居中對齊文本。

.ghost-element { 
    display: inline-block; 
    vertical-align:middle; 
    height: 100%; 
    width: 1px; 
} 

Ghost元素的作用類似於具有未知高度的其他元素的標記，用於在已知高度的父容器中垂直對齊。

更新小提琴這裏 http://jsfiddle.net/qb72szt2/3/