在使用 border-radius 创建的圆圈内垂直居中文本

Question

今天我遇到了很多麻烦，让一些小文本在使用 border-radius 创建的圆元素内垂直居中。

一些元素看起来不错，但特别是一个（小写 e 太靠近底部）；我有 2px 个 padding，看起来不错；然而，一旦在移动设备上查看，它会略低。

这是我能想出的一些最接近副本的代码来显示问题；你会注意到这个文本有一个类似的问题，小写 e 太靠近底部了。

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>

或display:flex； , 最简单的:

.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

Vertically/Horizontally 将父元素内的任何内容居中，而不知道以下任一元素的 heights/widths：

/* 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;
}

本质上，这会在父级内部创建一个幽灵元素，允许子级相对于它定位。 height: 100% 允许 vertical-align: middle 正常工作。

希望对您有所帮助！

编辑：归功于https://css-tricks.com/centering-in-the-unknown/

在使用 border-radius 创建的圆圈内垂直居中文本

Vertically centering text within circles created with border-radius

css

transform

vertical-alignment

centering