将div中的字符水平居中是一个像素

Question

我尝试了很多不同的东西，例如使用px宽度或em宽度。我已尝试嵌套跨度并在text-align:center或margin:0 auto上应用变体。

我可以让R到中心或者S到中心，但我不能让它们以相同的风格居中。它需要是相同的样式，因为虽然在这个例子中它是固定的，但一般来说角色是未知的。

增加和减少字体大小有时也会调整哪个项目居中。当我将浏览器缩放到300％时，它们都显示为居中，但这显然不是解决方案。 ：）

<style>
div { margin-bottom:10px; }

span {
  display:inline-block;
  width:16px;
  border:1px solid #000;
  text-align:center;
  margin-left:20px;
}

.example2 span {
  border-radius:50%;
}
</style>
<div class="example1">
<span>R</span> <span>S</span>
</div>

<div class="example2">
<span>R</span> <span>S</span>
</div>

http://codepen.io/anon/pen/NrqJLX

你可以看到'S'向右偏得1个像素。

虽然我发现了大量类似的其他stackoverflow问题，但没有一个是完全相同的。对不起，如果这是重复的。

Answer 1

简单的答案是角色的中心并不总是你想象的那样。所有字符字形在“普通”字体/字体中的宽度都不相同。

除非字体是monospace和sans-serif，否则ascenders，descenders和serif都会影响字符字形的“维度”。

为了获得更好的准确性，请在em中设置宽度/高度/行高，如果确实需要它精确到精确像素，我必须手动调整。

div {
  margin-bottom: 10px;
  display: inline-block;
  vertical-align: top;
}
span {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 144px;
  line-height: 1em;
  border: 1px solid #000;
  text-align: center;
  margin-left: 20px;
}
.example2 span {
  border-radius: 50%;
}
.other {
  font-family: monospace
}

<div class="example2">
  <span>R</span>  <span>S</span>
</div>

<div class="example2 other">
  <span>R</span>  <span>S</span>
</div>

Answer 2

除了字形大小外，在这种情况下，由于矩形中的空间为16px，圆圈中的空间为14px，因此＆＃34; S＆＃34;是7px宽的视觉效果，它必须是向右（或左）1px，因为它不能定位在半像素的位置。

无论你做什么，无论是否等宽，这都会引起问题，因为有些字母的视觉宽度（或高度）减去可用空间除以2，并不总是在两边都创造一个均匀的空间，因此是1像素实际中心的左侧或右侧（顶部或底部）。

那就是说，我认为flexbox会做得最好，保持事情的中心，所以我只是在你现有的代码中用display: inline-block替换了<{1}}

display: inline-flex;      /* used inline-flex to keep the span side-by-side */
justify-content: center;   /* horizontal, when using row direction */
align-items: center;       /* vertical,          -  "  -           */

示例代码段

＆＃13;

＆＃13;

div {
  margin-bottom:10px; 
}

span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:16px;
  border:1px solid #000;
  margin-left:20px;
}

.example2 span {
  border-radius:50%;
}

＆＃13;

<div class="example1">
<span>R</span> <span>S</span>
</div>

<div class="example2">
<span>R</span> <span>S</span>
</div>

＆＃13;

＆＃13;

＆＃13;