@danchiksux
Говнокодер

Как выравнять по центру элементы display: inline-flex?

Есть линия с элементами как выравнять её по центру?
<div class="egatop">
	<h3><p class="accbal">Ваше количество баллов: 12 </p>Самое большое количество баллов: 23</h3>
	<hr>
	<div class="warapperuser">
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
	</div>
	<div class="clear"></div>
</div>

.egatop {
	width: 90%;
	display: block;
	margin: 30px auto;
	min-height: 100px;
	background: #fff;
}

.egatop h3 {
	text-align: center;
	padding: 15px 0 0 0;
	font-size: 20px;
	font-family: "Open Sans", sans-serif;
}

.topuser {
	width: 162.12px;
	height: 170px;
	background: #ffcc68;
	float: left;
	border-radius: 2px;
	transition: .5s;
	margin: 20px 10px 30px 10px;
}

.accbal {
	color: #66cc00;
	font-size: 17px;
	padding: 0;
	margin: 0;
	font-family: "Arial";
	font-weight: bold;
}

.clear {
	clear: both;
}

.warapperuser {
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.topuser > img {
	display: block;
	margin: 1px auto 1px auto;
	width: 100px;
	height: 100px;
}

.topuser > div {
	text-align: center;
	font-family: "Open Sans", sans-serif;
}

.topuser > div:last-child {
	color: #00a816;
	font-weight: bold;
}
  • Вопрос задан
  • 251 просмотр
Решения вопроса 1
display: flex;
justify-content: center
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы