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>

或显示：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 center anything inside a parent element without knowing the heights/widths of either:

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

Essentially this creates a ghost element inside the parent that allows the child to be positioned relative to it. The height: 100% allows the vertical-align: middle to do its job properly.

Hope this helps!

Edit: Credit to https://css-tricks.com/centering-in-the-unknown/

使用border-radius

2 个答案: