如何对齐伪元素：before：和span元素 [英] How to align pseudo element :before :after and span element

问题描述

首先，我创建了一个没有伪元素的自定义按钮，一切都是align center。

然后，我在之前插入伪元素：但伪元素和跨度无法对齐中心了。

如何让它们对齐？

谢谢

  .x-box-item {border：1px solid black;宽度：300px; height：50px;位置：绝对;右：自动; left：0px; margin：0px;}。x-btn-wrap {width：100％;身高：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：'';宽度：50px; height：50px; background-image：url（https://gradschool.uoregon.edu/sites/gradschool1.uoregon.edu/files/facebook-like-icon-small.png）;显示：inline-block; background-size：50px 50px;}  

< a class =x-box-itemonClick =alert（'Hello World！'）> < span class =x-btn-wrap> < span class =x-btn-button> < span class =x-btn-inner> LIKE< / span> < /跨度> < /跨度>< / A>

解决方案

>使其对齐。

< a class = x-box-itemonClick =alert（'Hello World！'）> < span class =x-btn-wrap> < span class =x-btn-button> < span class =x-btn-inner> LIKE< / span> < /跨度> < / span>< / a>

I am practicing pseudo element and want to insert an image before a span on my custom button.

First, I create a custom button without pseudo element and everything is align center.

And then, I insert the pseudo element :before but the pseudo element and span can not align center anymore.

How to make them align?

Thanks

.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>

解决方案

Just give vertical-align: middle; to .x-btn-inner::before to make it align proper.

.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：和span元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！