Question

我正在练习伪元素，并希望在我的自定义按钮上的跨度之前插入图像。

首先，我创建一个没有伪元素的自定义按钮，一切都是对齐中心。

然后，我插入伪元素:before，但伪元素和span不再对齐中心。

如何使它们对齐？

由于

.x-box-item {
  border: 1px solid black;
  width: 300px;
  height: 50px;
  position: absolute;
  right: auto;
  left: 0px;
  margin: 0px;
}
.x-btn-wrap {
  width: 100%;
  height: 100%;
  display: table;
}
.x-btn-button {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  white-space: nowrap;
}
.x-btn-inner {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}
.x-btn-inner:before {
  content: '';
  width: 50px;
  height: 50px;
  background-image: url("https://gradschool.uoregon.edu/sites/gradschool1.uoregon.edu/files/facebook-like-icon-small.png");
  display: inline-block;
  background-size: 50px 50px;
}

<a class="x-box-item" onClick="alert('Hello World!')">
  <span class="x-btn-wrap">
    <span class="x-btn-button">
      <span class="x-btn-inner">
      LIKE
      </span>
  </span>
  </span>
</a>

Answer 1

只需将vertical-align: middle;提交给.x-btn-inner::before即可使其正确对齐。

.x-box-item {
  border: 1px solid black;
  width: 300px;
  height: 50px;
  position: absolute;
  right: auto;
  left: 0px;
  margin: 0px;
}
.x-btn-wrap {
  width: 100%;
  height: 100%;
  display: table;
}
.x-btn-button {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  white-space: nowrap;
}
.x-btn-inner {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}
.x-btn-inner:before {
  content: '';
  width: 50px;
  height: 50px;
  background-image: url("https://gradschool.uoregon.edu/sites/gradschool1.uoregon.edu/files/facebook-like-icon-small.png");
  display: inline-block;
  background-size: 50px 50px;
  vertical-align:middle;
}

<a class="x-box-item" onClick="alert('Hello World!')">
  <span class="x-btn-wrap">
    <span class="x-btn-button">
      <span class="x-btn-inner">
      LIKE
      </span>
  </span>
  </span>
</a>

如何对齐伪元素：before：after和span元素

1 个答案: