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

Question

[Bart Simpson]

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


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


Вот код

<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;
	}
}

В чем моя ошибка?

Comments

[Алексей Дубровин]

Разница в том что в 1 случае без обертки у нас img - display = inline
А когда мы добавляем див то у внутреннего элемента display = block;
Тк же для большого кода используют песочницы, чтоб можно было это посмотреть.
Лично я, как и многие не буду копировать и эмулировать у себя.

Answer 1

[ForSureN1]

Задайте .elipse { margin: 0 auto }, и будет вам счастье

Comments

[Bart Simpson]

Магия какая-то, вчера часа полтора сидел, задавал и марджин авто и другие свойтсва..Сегодня работает, спасибо!

[ForSureN1]

Ivan Lunin, возможно не тому задавали :)