Das div mit border: 2px solid red hat 2 Pseudoelemente, ::before und ::after, jeweils mit border-color: green und border-color: blue. Ich versuche, die Kreise green und blue in der Mitte des Quadrats red auszurichten. Aber dazu nicht in der Lage.

Ich habe den folgenden Code:

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader::after,
.loader::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
  left: 25%;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
  left: -25%;
}
<div class="loader-container">
  <div class='loader'></div>
</div>

Ich habe auch nach der Lösung gesucht und diese gefunden:

  1. Vertikal / horizontal zentrieren des generierten Inhalts eines Pseudoelements
  2. Ein Pseudoelement zentrieren

Aber sie arbeiten nicht für mich. Bitte helfen Sie. Dankeschön.

Bearbeiten Das Problem tritt aufgrund der unterschiedlichen height und width der Pseudoelemente ::before und ::after auf. Denn wenn height und width von beiden auf denselben Wert geändert wurden, wurden sie auf die Mitte ausgerichtet. Ich versuche jedoch, sie in der Mitte auszurichten, während die height und width jedes Kreises unterschiedlich bleiben.

0
anshuman 20 Jän. 2019 im 09:12

3 Antworten

Beste Antwort

Bei Interesse können Sie Ihren Code vereinfachen, ohne Pseudoelemente verwenden zu müssen:

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  height:102px;
  width:150px;
  background:
    /*circle with a radius of 25px and border 2px blue*/
    radial-gradient(circle at center,
      transparent 24px,blue 25px,blue 26px,transparent 27px),
    /*circle with a radius of 50px and border 2px green*/
    radial-gradient(circle at center,
      transparent 49px,green 50px,green 51px,transparent 52px);
}
<div class="loader-container">
  <div class='loader'></div>
</div>
1
NikxDa 20 Jän. 2019 im 15:46

Wenn Sie die Abmessungen der Box kennen, können Sie die Peuso-Elemente position: absolute und dann über den Ansatz transform: translate(-50%, -50%) zentrieren. Hoffentlich hilft das.

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 200px;
  height: 100px;
  position: relative;
}

.loader::after,
.loader::before {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
}
<div class="loader-container">
  <div class='loader'></div>
</div>
2
NikxDa 20 Jän. 2019 im 06:18

Ich habe einige Änderungen an Ihrem CSS vorgenommen. Es funktioniert

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  position relative;
  width:150px;
  height:150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader::after,
.loader::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
}
<div class="loader-container">
  <div class='loader'></div>
</div>
1
Abolfazl Panbehkar 20 Jän. 2019 im 06:26