居中水平和垂直文本的相對高度div

我想將文本居中放置在包含圖像的相對高度div中。我使用絕對位置，但是當我的文本位於兩行時，文本不居中。我已經嘗試使用表格，但由於img，它不起作用。居中水平和垂直文本的相對高度div

HTML：

<div id="hubs"> 
    <h3>Nos Hubs</h3> 
    <hr> 
    <a class="thumbnail vignette-hub" href="http://kkw.fr"> 
    <img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" /> 
    <p class="txt-hub-image"> 
     Hub de</br>Nantes 
    </p> 
    </a> 
</div>

CSS：

.txt-hub-image { 
    z-index: 100; 
    position: absolute; 
    left: 0px; 
    top: 50%; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
    font-size: 16px; 
} 
.vignette-hub { 
    position: relative; 
    width: 25%; 
    min-width: 135px; 
} 
.thumbnail { 
    display: block; 
    padding: 4px; 
    margin-bottom: 20px; 
    line-height: 1.42857143; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    -webkit-transition: border .2s ease-in-out; 
    -o-transition: border .2s ease-in-out; 
    transition: border .2s ease-in-out; 
} 
.thumbnail > img, 
.thumbnail a > img { 
    margin-right: auto; 
    margin-left: auto; 
} 
a.thumbnail:hover, 
a.thumbnail:focus, 
a.thumbnail.active { 
    border-color: #337ab7; 
} 
.thumbnail .caption { 
    padding: 9px; 
    color: #333; 
}

你有什麼想法？

來源

2015-08-09 Louis D.

你看過這裏提到的各種選項 - http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically？ – Harry

@Michael_B不用擔心;）我只是看到所有的答案，我會讀一切。 –

有，使之成爲所有維自動工作，需要您的片斷幾個變化：

p標籤在默認情況下有一個margin-top。如果你不重置它，那麼絕對將它定位在50％將會變成50％+ margin-top。這需要重置。
當你絕對定位一個元素在top: 50%時，盒子被定位在容器高度的50％處，並且文本不斷從該位置被添加。因此，要將文本塊的中心與父文件的中心進行匹配，必須將文本翻譯爲文本大小的50％。這可以通過添加transform: translateY(-50%)來完成。
您不需要在p標記上添加height: 100%，它可以被刪除。

注：使用定位需要CSS3支持transform方法，但我相信，因爲你已經在使用transition這不應該是一個問題。如果您想要支持非CSS3兼容瀏覽器，請查看here提及的其他方法。我已經添加了一個不同的答案來解釋我前面提到的前兩點。

.txt-hub-image { 
 
    z-index: 100; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    /* added to fix the vertical centering */ 
 
    margin-top: 0px; 
 
    transform: translateY(-50%); 
 
} 
 
.vignette-hub { 
 
    position: relative; 
 
    width: 25%; 
 
    min-width: 135px; 
 
} 
 
.thumbnail { 
 
    display: block; 
 
    padding: 4px; 
 
    margin-bottom: 20px; 
 
    line-height: 1.42857143; 
 
    background-color: #fff; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    -webkit-transition: border .2s ease-in-out; 
 
    -o-transition: border .2s ease-in-out; 
 
    transition: border .2s ease-in-out; 
 
} 
 
.thumbnail > img, 
 
.thumbnail a > img { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
a.thumbnail:hover, 
 
a.thumbnail:focus, 
 
a.thumbnail.active { 
 
    border-color: #337ab7; 
 
} 
 
.thumbnail .caption { 
 
    padding: 9px; 
 
    color: #333; 
 
}

<div id="hubs"> 
 
    <h3>Nos Hubs</h3> 
 
    <hr> 
 
    <a class="thumbnail vignette-hub" href="http://kkw.fr"> 
 
    <img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" /> 
 
    <p class="txt-hub-image"> 
 
     Hub de</br>Nantes 
 
    </p> 
 
    </a> 
 
</div>

這裏是一個demo fiddle作爲the snippets feature seems to be down。

來源

2015-08-09 12:14:50 Harry

這正是我想要的。對於非CSS3瀏覽器，這不是問題，因爲我的網站沒有提供給這些舊瀏覽器。 –

將您的.txt-hub-image類，最高值從50％更改爲25％。

來源

2015-08-09 12:05:49 AleshaOleg

居中水平和垂直文本的相對高度div

回答

相關問題