如何垂直对齐伪元素？ [复制]答案

【问题标题】：How to vertically align pseudo elements? [duplicate]如何垂直对齐伪元素？ [复制]
【发布时间】：2019-01-14 18:09:42
【问题描述】：

我有 articleSubTitle 的前后伪元素。当我有一个小容器或在来自articleSubTitle 的文本落入新行的移动设备上时，我遇到了问题。这导致after 元素正好落在最后一个单词之后（参见 sn-p）。

我想要的是articleSubTitle 是一个完整的元素，并且前后元素始终放置在它的中间，不管它可能有多长。我想发布一张图片，但上传者一直无法上传。

我尝试过制作articleSubTitle display:block 和display:inline-block。这些尝试都没有帮助。

有谁知道我如何做到这一点？

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

使用弹性框：

.articleSubTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container {
  background: silver;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle {
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
  text-align: center;       /* center text inside */
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class="container" style="max-width: 400px; margin: 0 auto;">
  <h4 class="articleSubTitle">From the company A &amp; the company B</h4>
</div>

<div class="container">
  <h4 class="articleSubTitle">From the company A &amp; the company B</h4>
</div>

【讨论】：

【解决方案2】：

一个解决方案是让元素成为一个弹性盒容器：

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  display: flex; /*added this*/
  align-items:center; /*added this*/
  justify-content:center; /*added this*/
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

或者使用填充并依靠渐变来创建线条：

.container {
  width: 70%;
  background: gray;
  text-align:center;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  padding:0 80px;
  margin:0;
  display:inline-block;
  background:
   linear-gradient(#2f2f2f,#2f2f2f) left center,
   linear-gradient(#2f2f2f,#2f2f2f) right center;
  background-size:70px 1px;
  background-repeat:no-repeat;
}

<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

【讨论】：