Ich muss Text in ein Pseudoelement einfügen, aber wie ein allgemeiner Block ausrichten (in meinem Fall gerechtfertigt).

Beispiel:

.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' befindet sich jetzt in der Nähe von 'Text3'. Ich brauche 'Text2', um in der Mitte zu sein.

2
Роман Коптев 23 Juni 2018 im 21:57

3 Antworten

Beste Antwort

Eine Idee ist, die Elementposition relativ zum Container zu machen und Sie können sie einfach ausrichten:

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

Oder machen Sie es zu einem Pseudoelement des Hauptcontainers und verwenden Sie Flexbox, um die Reihenfolge zu ändern und auszurichten:

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

.block3 {
  order:2;
}

.container:after {
  content: "Text2";
}
<div class="container">
  <div class="block block1">Text1</div>

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

Hier ist eine andere Idee mit 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">Text1</div>

  <div class="block block3">Text3</div>
</div>
4
Temani Afif 23 Juni 2018 im 19:25

Text2 ist "in der Nähe" von Text3, weil es sich in Text3 befindet - so funktionieren Pseudoelemente.

Was Sie mit .block:not(:first-child):before gemacht haben, entspricht im Wesentlichen:

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

Ein sauberer Weg, um das zu erreichen, was Sie ohne Positionierungstricks wollen, wäre die Verwendung von Flexbox mit der Eigenschaft order wie folgt:

.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>
3
Jon Uleis 23 Juni 2018 im 19:04

Wenn Sie keine Ränder, Hintergründe usw. auf den Text anwenden müssen (damit Sie mit display:inline anstelle von inline-block einverstanden sind), können Sie auch Folgendes tun:

.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>
0
Ilya Streltsyn 23 Juni 2018 im 19:34