NietzscheProgrammer NietzscheProgrammer - 4 months ago 8
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.

Look:

<li>
<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>
</a>
</div>
</li>


and the css for is:

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

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

Answer

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.