在邊界半徑創建的圓圈內垂直居中文本

Question

今天，我在使用border-radius創建的圓圈元素內垂直居中放置一些小文本時遇到了很多麻煩。

一些元素看起來不錯，但其中一個（小寫字母和太接近底部）;我有的padding它看起來很好;然而，一旦在移動設備上觀看，它稍微低一點。

下面是一些代碼，儘可能接近副本，因爲我可以想出問題;您會注意到此文本與小寫字母和太接近底部有類似的問題。

HTML：

<div class="option"> 
    <span class="icon">t</span> 
    <span class="text">123456789</span> 
</div> 
<div class="option"> 
    <span class="icon">f</span> 
    <span class="text">123456789</span> 
</div> 
<div class="option"> 
    <span class="icon">e</span> 
    <span class="text"><a href="mailto:moo@moo.com">moo@moo.com</a></span> 
</div> 

CSS：

.option { 
    margin-bottom: 10px; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 14px; 
} 

.option .icon { 
    display: inline-block; 
    text-align: center; 
    width: 24px; 
    height: 24px; 
    line-height: 24px; 
    color: #fff; 
    border-radius: 50%; 
    background-color: blue; 
} 

.option .text { 
    padding-left: 10px; 
} 

的jsfiddle：http://jsfiddle.net/7bygsgn1/7/

雖然我還沒有上的jsfiddle特定代碼嘗試過的時候，我遇到了這個問題一天我嘗試的整個範圍的中心的技術，包括：

• 使用line-height
• 使用absolute定位
• 結合使用vertical-align: middle;與display: table-cell;
• 緣陰性
• 使用方法說明here。

要麼它沒有影響對中或導致圓的形狀改變。

有沒有什麼辦法可以在這種情況下可靠地垂直居中？

Answer 1

您可以使用高度爲24px/100％的內聯塊僞元素，並將其垂直對齊至中間。

.option { 
 
    margin-bottom: 10px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 14px; 
 
} 
 
.option .icon { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 24px; 
 
    height: 24px; 
 
    color: #fff; 
 
    border-radius: 50%; 
 
    background-color: blue; 
 
} 
 

 
/* here the pseudo-element method */ 
 
.option .icon:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    padding-top: 100%;/* cause here we have a square and width for percentage vertical (padding/margin) is the reference , height:100%; or height:24px; will do as well */ 
 
    vertical-align: middle; 
 
} 
 
/* end update */ 
 
.option .text { 
 
    padding-left: 10px; 
 
}

<div class="option"> 
 
    <span class="icon">t</span> 
 
    <span class="text">123456789</span> 
 
</div> 
 
<div class="option"> 
 
    <span class="icon">f</span> 
 
    <span class="text">123456789</span> 
 
</div> 
 
<div class="option"> 
 
    <span class="icon">e</span> 
 
    <span class="text"><a href="mailto:moo@moo.com">moo@moo.com</a></span> 
 
</div>

或顯示：彎曲;中，最簡單的：父元素內

.option { 
 
    margin-bottom: 10px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 14px; 
 
} 
 
.option .icon { 
 
    /* next-three lines to center content both axis */ 
 
    display: inline-flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    /*text-align: center;*/ 
 
    width: 24px; 
 
    height: 24px; 
 
    color: #fff; 
 
    border-radius: 50%; 
 
    background-color: blue; 
 
} 
 
.option .text { 
 
    padding-left: 10px; 
 
}

<div class="option"> 
 
    <span class="icon">t</span> 
 
    <span class="text">123456789</span> 
 
</div> 
 
<div class="option"> 
 
    <span class="icon">f</span> 
 
    <span class="text">123456789</span> 
 
</div> 
 
<div class="option"> 
 
    <span class="icon">e</span> 
 
    <span class="text"><a href="mailto:moo@moo.com">moo@moo.com</a></span> 
 
</div>

Answer 2

縱向/橫向中心的任何不知道的高度/寬度或者：

/* This parent can be any width and height */ 
.parent { 
    text-align: center; 

    /* May want to do this if there is risk the container may be narrower than the element inside */ 
    white-space: nowrap; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.parent:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 

本質上講，這裏面產生鬼元件允許孩子相對於其定位的父母。高度：100％可以使vertical-align：middle正常工作。

希望這會有所幫助！

編輯︰貸款https://css-tricks.com/centering-in-the-unknown/