Question

我有这个结构，我无法改变它，我只能对CSS进行更改，而且我没有权限使用flex。

我们的想法是将文本与不同的字体大小垂直对齐，并存在于不同的容器中。

.wrap {
  display: table;
}

.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.container a span {
  vertical-align: middle;
}

.before::before {
  content: "1-xyZ";
  font-size: 50px;
  color: red;
  vertical-align: middle;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>
</div>

问题是无论“1-xyZ”或“2-xyZ”的font-size如何，我都需要将它们垂直对齐。

Answer 1

你可以尝试 hack 使用位置来使第一个总是与中间的第二个对齐。

.wrap {
  display: table;
}
.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  padding: 10px;
  position:relative;
  display:table-cell;
}
a:before {
  content:"";
  position:absolute;
  top:50%;
  height:2px;
  right:0;
  left:0;
  margin-top:-1px;
  background:rgba(0,0,0,0.4);
}

.container a span {
  display: inline-block;
  position: relative;
}

.before::before {
  content: "1-xyZ";
  font-size: 50px;
  color: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


/* To create the space needed inside the span since the other one is absolute*/

.before::after {
  content: "1-xyZ";
  visibility: hidden;
  font-size: 50px;
  display: inline-block;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>

Answer 2

只需制作伪元素display:table-cell和vertical-align: middle

.wrap {
  display: table;
}

.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.before::before {
  content: "1-xyZ";
  display: table-cell;
  font-size: 50px;
  color: red;
  vertical-align: middle;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>

Answer 3

您可以使用与font-sizes相同的值添加line-height：

.wrap {
  display: table;
}

.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  line-height: 100px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.container a span {
  vertical-align: middle;
}

.before::before {
  content: "1-xyZ";
  font-size: 50px;
  line-height: 50px;
  color: red;
  vertical-align: middle;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>
</div>

使用不同字体大小

3 个答案: