在边界半径创建的圆圈内垂直居中文本

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/