@IvanLu
Начинающий веб-разработчик

Почему происходит смещение влево?

У меня есть страница с карточками которую нужно сверстать но чтоб у картинки сзади был круг..
Не понимаю, почему когда я начинаю задавать высоту и ширину кругу он смещается влево (мне нужно чтоб был по-центру как и все другие элементы карточки)
Вот здесь нормально когда не заданы свойства элипса
619ecfe90186d032943903.png

А тут сразу происходит смещение влево
619ed04cd7dee897305442.png

Вот код
<div class="accessories__wrapper">
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
					<div class="card">
						<div class="elipse">
							<img src="images/Accessories/accessories1.png">
						</div>
						<h3>Lorem zorem</h3>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic veniam odio velit soluta cumque, ratione, veritatis ipsa itaque architecto asperiores quia fuga, deleniti illo alias quas aliquid voluptatibus pariatur tempore accusantium. Ipsum, laborum, deleniti!</p>
						<p>134</p>
						<button>yes</button>
					</div>
				</div>


.accessories__wrapper{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 24px;
grid-row-gap: 60px;
align-self: center;
align-items: center;
justify-items: center; 
& .elipse{
	height: 150px;
	width: 150px;
	border-radius: 50%;
	background-color: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	}
}

В чем моя ошибка?
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
@ForSureN1
frontend dev
Задайте .elipse { margin: 0 auto }, и будет вам счастье
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы