NietzscheProgrammer NietzscheProgrammer - 3 months ago 6x
HTML Question

How do I center a link with an image in order to respond to responsive design?

I have an element which looks weird in mobile, it is not totally center as I need it,so I want to know if there is any kind of standard in order to center things in any resolution.


<div class="asoc-director">
<a href="javascript:void(0)" class="client-director">
<img class="card-picture-admins" src="assets/images/team/my-img.png">
<span class="name-role" id="37">Sigfried Bermudez <br> Associate Director</span>

and the css for is:

.asoc-director {
padding-top: 46px;
width: 100%;
height: 140px;

li > div a:first-child {
left: 35%;
z-index: 2;


There is. It's called flexbox, which is is a property of display. Use display: flex on the container in conjunction with align-content: center and justify-content: center to center the children.