Проблема с выравниванием псевдоэлементов - PullRequest
Новая
       6

Проблема с выравниванием псевдоэлементов

0 голосов
/ 20 января 2019

div с border: 2px solid red имеет 2 псевдоэлемента, ::before и ::after, каждый с border-color: green и border-color: blue соответственно. Я пытаюсь выровнять круги green и blue в центре квадрата red. Но не в состоянии это сделать.

У меня есть следующий код: 

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

Я также искал решение и нашел эти:

  1. Вертикальное / горизонтальное центрирование сгенерированного содержимого псевдоэлемента
  2. Центрирование псевдоэлемента

Но они не работают для меня. Пожалуйста помоги. Спасибо.

Редактировать Проблема возникает из-за различных height и width псевдоэлементов ::before и ::after. Потому что, когда height и width обоих изменились на одно и то же значение, они выровнялись по центру. Тем не менее, я пытаюсь выровнять их по центру, оставляя height и width каждого круга отличными.

Ответы [ 3 ]

0 голосов
/ 20 января 2019

Я сделал некоторые изменения в вашем CSS, Это работает 

.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>
0 голосов
/ 20 января 2019

В случае, если вы заинтересованы, вы можете упростить свой код без использования псевдоэлемента: 

.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>
0 голосов
/ 20 января 2019

Если вы знаете размеры ящика, вы можете position: absolute peuso-элементы и затем центрировать их с помощью подхода transform: translate(-50%, -50%).Надеюсь, это поможет. 

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