时间戳

首页 > 解决方案 > 跨度内的垂直对齐不适用于特殊字符

html - 跨度内的垂直对齐不适用于特殊字符

问题描述

我正在尝试垂直对齐文本，但星形未对齐，如何将它们垂直居中对齐？

.operators {
  margin: 0;
  padding: 0;
  list-style: none;
}
.operators > li {
  display: inline-block;
}
.operators > li span{
  font-size: 18px;
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: #cdcdcd;
  border: 1px solid #333333;
}
<ul class="operators">
  <li>
    <span>+</span>
  </li>
  <li>
    <span>-</span>
  </li>
  <li>
    <span>*</span>
  </li>
  <li>
    <span>=</span>
  </li>
  <li>
    <span>2</span>
  </li>
</ul>

标签： htmlcss

解决方案

您可以尝试另一个居中的星号。带有 HTML 实体的 Unicode 星号运算符&#8727; 但是请注意，某些浏览器可能无法正确显示

.operators {
  margin: 0;
  padding: 0;
  list-style: none;
}
.operators > li {
  display: inline-block;
}
.operators > li span{
  font-size: 18px;
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: #cdcdcd;
  border: 1px solid #333333;
}
<ul class="operators">
  <li>
    <span>+</span>
  </li>
  <li>
    <span>-</span>
  </li>
  <li>
    <span>&#8727;</span>
  </li>
  <li>
    <span>=</span>
  </li>
  <li>
    <span>2</span>
  </li>
</ul>

推荐阅读