In .info ul add padding: 0; left: 50%; transform: translateX(-50%); padding: 0; left: 50%; transform: translateX(-50%); . In .info li remove margin. If it is needed, then do not add the last element.
ul { list-style: none; } .recent { position: relative; display: inline-block; } .info { color: red; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(248,229,20,.9); } .info ul { position: absolute; padding: 0; left: 50%; transform: translateX(-50%); } .info li { display: inline-block; } .info a { text-decoration: none; }
<div class="col-lg-3 col-md-6"> <div class="recent"> <img class="img-fluid" src="http://sunnyrio.beget.tech/img/man_1.jpg" alt="JD"> <div class="info d-none"> <p>sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p> <ul> <li> <a href=#> <img src="http://sunnyrio.beget.tech/img/gplus.png"> </a> </li> <li> <a href=#> <img src="http://sunnyrio.beget.tech/img/gplus.png"> </a> </li> <li> <a href=#> <img src="http://sunnyrio.beget.tech/img/gplus.png"> </a> </li> </ul> </div> </div> </div>
