Есть линия с элементами как выравнять её по центру?
<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;
}