Css 在使用边框半径创建的圆内垂直居中文本

今天，我在使用

边框半径创建的圆形元素中垂直居中放置一些小文本时遇到了很多麻烦

有些元素看起来不错，但有一个元素特别好（小写字母太靠近底部）；我有
2px
的
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>

.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:

虽然我还没有在JSFIDLE上使用特定的代码来尝试它们，但当我今天遇到这个问题时，我尝试了一系列的定心技术，包括：


使用
行高
使用
绝对
定位

使用
垂直对齐：中间对齐结合
显示：表格单元格

负边际
使用所解释的方法

它要么对定心没有影响，要么导致圆的形状改变

在这种情况下，是否有任何方法可以可靠地垂直居中？
您可以使用高度为24px/100%的内联块伪元素，并将其垂直对齐到中间


选项{
边缘底部：10px；
字体系列：“源Sans-Pro”，无衬线；
字体大小：14px；
}
.选项.图标{
显示：内联块；
文本对齐：居中；
宽度：24px；
高度：24px；
颜色：#fff；
边界半径：50%；
背景颜色：蓝色；
}
/*这里是伪单元法*/
.option.icon:before{
内容：''；
显示：内联块；
填充顶部：100%；/*因为这里我们有一个正方形，垂直百分比（填充/边距）的宽度是参考，高度：100%；或高度：24px；也可以*/
垂直对齐：中间对齐；
}
/*结束更新*/
.选项.文本{
左侧填充：10px；
}

T
123456789
F
123456789
E
您可以使用高度为24px/100%的内联块伪元素，并将其垂直对齐到中间


选项{
边缘底部：10px；
字体系列：“源Sans-Pro”，无衬线；
字体大小：14px；
}
.选项.图标{
显示：内联块；
文本对齐：居中；
宽度：24px；
高度：24px；
颜色：#fff；
边界半径：50%；
背景颜色：蓝色；
}
/*这里是伪单元法*/
.option.icon:before{
内容：''；
显示：内联块；
填充顶部：100%；/*因为这里我们有一个正方形，垂直百分比（填充/边距）的宽度是参考，高度：100%；或高度：24px；也可以*/
垂直对齐：中间对齐；
}
/*结束更新*/
.选项.文本{
左侧填充：10px；
}

T
123456789
F
123456789
E
您可以使用高度为24px/100%的内联块伪元素，并将其垂直对齐到中间


选项{
边缘底部：10px；
字体系列：“源Sans-Pro”，无衬线；
字体大小：14px；
}
.选项.图标{
显示：内联块；
文本对齐：居中；
宽度：24px；
高度：24px；
颜色：#fff；
边界半径：50%；
背景颜色：蓝色；
}
/*这里是伪单元法*/
.option.icon:before{
内容：''；
显示：内联块；
填充顶部：100%；/*因为这里我们有一个正方形，垂直百分比（填充/边距）的宽度是参考，高度：100%；或高度：24px；也可以*/
垂直对齐：中间对齐；
}
/*结束更新*/
.选项.文本{
左侧填充：10px；
}

T
123456789
F
123456789
E
您可以使用高度为24px/100%的内联块伪元素，并将其垂直对齐到中间


选项{
边缘底部：10px；
字体系列：“源Sans-Pro”，无衬线；
字体大小：14px；
}
.选项.图标{
显示：内联块；
文本对齐：居中；
宽度：24px；
高度：24px；
颜色：#fff；
边界半径：50%；
背景颜色：蓝色；
}
/*这里是伪单元法*/
.option.icon:before{
内容：''；
显示：内联块；
填充顶部：100%；/*因为这里我们有一个正方形，垂直百分比（填充/边距）的宽度是参考，高度：100%；或高度：24px；也可以*/
垂直对齐：中间对齐；
}
/*结束更新*/
.选项.文本{
左侧填充：10px；
}

T
123456789
F
123456789
E
垂直/水平居中父元素内的任何内容，而不知道以下任一项的高度/宽度：

/* 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%允许垂直对齐：中间正确执行其工作

希望这有帮助

编辑：在不知道以下任一项的高度/宽度的情况下，将父元素内的任何内容垂直/水平居中：

/* 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%允许垂直对齐：中间正确执行其工作

希望这有帮助

编辑：在不知道以下任一项的高度/宽度的情况下，将父元素内的任何内容垂直/水平居中：

/* 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%允许垂直对齐：中间正确执行其工作

希望这有帮助

编辑：在不知道以下任一项的高度/宽度的情况下，将父元素内的任何内容垂直/水平居中：

/* 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%允许垂直对齐：中间正确执行其工作

希望这有帮助

编辑：归功于<