代码之家 › 专栏 › 技术社区 › Paul

如何垂直对齐伪元素?[副本]

css3 css html

Paul · 技术社区 · 7 年前

我有一个前后伪元素 articleSubTitle . 我遇到了一个问题,当我有一个小容器或移动设备上的文本 文章副标题 换了一条线。这是因为 after 元素落在最后一个单词后面(请参阅片段)。

我想要的是 文章副标题 作为一个整体的元素,前后元素总是放在它的中间,不管它可能有多长时间。我会上传一张图片,但上传者总是无法上传。

我试过做 文章副标题 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>

2 回复 | 直到 7 年前

Stickers 7 年前

使用flexbox:

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

Temani Afif 7 年前

解决方案是使元素成为flexbox容器:

.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”>来自A公司和B公司<h4>
</分区>