在div容器中間的中心內容

我試圖創建一個「瓷磚」（方塊），其中間的內容完全居中。在div容器中間的中心內容

這裏的HTML

<div class="tile-facebook"> 
    <h5>Facebook</h5> 
    <div class="tile-notification">4</div> 
    <h4>notifications</h4> 
    </div>

而CSS

.tile-facebook{ 
    width:175px; 
    height:175px; 
    background: #3b5998 ; 
    text-align: center; 
    border-radius: 10px; 
    border-style: solid; 
    border-color: #ccc; 
    border-width:1px; 
    color: white; 
} 

.tile-notification{ 
    font-size:80px; 
    font-weight:bold; 
    padding:10px 0px; 

}

我得在塊的中間的文字，但是我希望它直接在中間具有相同從頂部和底部填充。思考？

來源

2014-03-04 user3370902

這是你想要做的嗎？ http://jsfiddle.net/cnq82/ –

是的，你知道了！謝謝！ – user3370902

oki，剛剛用一些關於垂直填充/邊距的鏈接做了一個回答:) –

您可能沒有設置高度，但使用僞或額外的元素，從你的boxe的任意寬度提請你方。

縱向填充100％+內嵌塊是一種繪製正方形並在其中間添加內容的方式。

<div class="tile-facebook"> 
    <div class="wrapper"> 
     <h5> 
      Facebook 
     </h5> 
     <div class=" tile-notification "> 
      4 
     </div> 
     <h4> 
      notifications 
     </h4> 
    </div> 
</div>

.tile-facebook { 
    width:175px; 
    background: #3b5998; 
    text-align: center; 
    border-radius: 10px; 
    border-style: solid; 
    border-color: #ccc; 
    border-width:1px; 
    color: white; 
} 
.tile-notification { 
    font-size:80px; 
    font-weight:bold; 
} 
.tile-facebook .wrapper * { 
    margin:0; 
} 
.tile-facebook:before { 
    padding-top:100%; 
    content:''; 
} 
.tile-facebook:before, 
.wrapper { 
    display:inline-block; 
    vertical-align:middle; 
}

http://jsfiddle.net/cnq82/

一些解釋關於垂直％填充或保證金：http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

所以，（希望這使得它多一點明確的：））

如果你gi垂直填充100％的高度將等於父母的寬度。

如果你想要的高度是20像素的你可以做高：padding:100% 0 20px 0 ;或padding:20px 0 100% 0;

如果你想用4比一個盒子：3，只是做padding-top:75%;或padding:50% 0 25% 0;。

僞或額外的元素可以浮動，或內聯塊爲垂直對齊。

您不需要在父級的CSS中設置寬度。

來源

2014-03-04 18:27:48

你應該添加一些關於如何改變外框高度的註釋（就像OP在他的小提琴中所做的那樣），順便說一句，我們必須改變'：before'元素的'padding-top'，而不是OP應該注意一下，以防他想要稍微增加或減少高度。 –

W3C上的鏈接，如果閱讀解釋它全部:) 填充100％給出寬度的100％填充頂部和底部允許混合％和任何其他值。 100％的比例爲1：1 等... :)問題是關於一個廣場，我相信:) –

此修補程序要求內容高度永不改變，並且您需要添加另一個<div>。

<div class="tile-facebook"> 
    <div class="center"> 
    <h5>Facebook</h5> 
    <div class="tile-notification">4</div> 
    <h4>notifications</h4> 
    </div> 
</div>

並添加CSS：

.title-facebook { 
    position: relative;  
} 

.center { 
    position: absolute; 
    top: 50%; 
    margin-top: -[half height]; 
    left:0; 
    width: 100%; 
}

哪裏[half height]是.center DIV高度的一半。

來源

2014-03-04 18:21:38 pstenstrm

在jsfiddle中運行這個文本會使文本溢出藍色div的底部和左邊緣。 – TylerH

我添加了'left：0;寬度：100％;'修復了這個問題。我只專注於身高，忘記了其他維生素...... – pstenstrm

這樣做最好使用'transform：translate'而不是手動設置'margin-top'，但這不是很靈活，但是使用transform需要我們添加一些不同版本的供應商前綴，這樣css可以跨瀏覽器使用。 –

添加margin: -30px;你的CSS這裏：

.tile-notification { 
    font-size:80px; 
    font-weight: bold; 
    padding: 10px 0px; 
    margin: -30px; 
}

來源

2014-03-04 18:21:59 TylerH

在div容器中間的中心內容

回答

相關問題