代码之家 › 专栏 › 技术社区 › Ð Ð¾Ð¼Ð°Ð½ ÐÐ¾Ð¿ÑÐµÐ²

如何在伪元素前后像公共块一样对齐

css html

Ð Ð¾Ð¼Ð°Ð½ ÐÐ¾Ð¿ÑÐµÐ² · 技术社区 · 6 年前

我需要在伪元素中添加一些文本,但是像公共块一样对齐(在我的例子中是对齐的)。

例子:

.container {
  text-align: justify;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.block {
  display: inline-block;
  font-size: 20px;
}

.block:not(:first-child):before {
  content: "Text2";
  display: inline-block;
}

<div class="container">
  <div class="block block1">Text1</div>
  <div class="block block3">Text3</div>
</div>

“text2”现在接近“text3”。我需要“text2”在中间。

3 回复 | 直到 6 年前

Temani Afif 6 年前

一个想法是使元素相对容器放置,并且您可以轻松地将其对齐:

.container {
  text-align: justify;
  position:relative;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.block {
  display: inline-block;
  font-size: 20px;
}

.block:not(:first-child):before {
  content: "Text2";
  position:absolute;
  text-align:center;
  left:0;
  right:0;
}

<div class="container">
  <div class="block block1">Text1</div>

  <div class="block block3">Text3</div>
</div>

或者将其作为主容器的伪元素,并使用flexbox更改顺序并将其对齐:

.container {
  justify-content: space-between;
  display:flex;
}

.block3 {
  order:2;
}

.container:after {
  content: "Text2";
}

<div class=“container”>
<div class=“block block1”>文本1</div>

<div class=“block block3”>文本3</div>
</分区>

下面是使用float的另一个想法:

.container {
  text-align: center;
  font-size: 20px;
}

.block1 {
  float: left;
}

.block3 {
  float: right;
}

.container:before {
  content: "Text2";
  display: inline-block;
  font-size: 20px;
}

<div class=“container”>
<div class=“block block1”>文本1</div>

<div class=“block block3”>文本3</div>
</分区>

Jon Uleis 6 年前

text2“接近”text3,因为它在text3内部——这就是伪元素的工作方式。

你做了什么 .block:not(:first-child):before 基本相当于:

<div class="block block3">
  <div>Text2</div>
  Text3
</div>

使用flexbox和 order 这样的属性:

.container {
  display: flex;
  justify-content: space-between;
}

.block {
  font-size: 20px;
}

.container:after {
  content: "Text2";
  font-size: 20px;
}

.block3 {
  order: 1;
}

<div class="container">
  <div class="block block1">Text1</div>
  <div class="block block3">Text3</div>
</div>

Ilya Streltsyn 6 年前

如果您不需要对文本应用边框、背景等(因此您可以 display:inline 而不是 inline-block ),还可以执行以下操作:

.container {
  text-align: justify;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.block {
  display: inline; /* not inline-block â so both real and generated text is aligned as one */
  font-size: 20px;
}

.block:not(:first-child):before {
  content: "Text2 "; /* white space is crucial, text-align:justify works by stretching it! */
}

<div class="container">
  <div class="block block1">Text1</div>
  <div class="block block3">Text3</div>
</div>