Images not centered

Question

Can some one please explain me why images are not centered in middle? Why is that DHL moved?

 img { padding-right: 1em; vertical-align: middle; margin-left: auto; margin-right: auto; } .text { width: 100%; height: auto; text-align:center; padding: 1em; margin: auto; } 

 <div class="text"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50">Zásielkovňa <br> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL <br> <img src="http://obec-vinodol.sk/wp-content/uploads/2015/03/Slovensk%C3%A1_po%C5%A1ta_Logo.svg_.png" alt="posta" width="56" height="50">Slovenská pošta </div> 

Answer 1

CSS GRID was made for this exact purpose.

CSS Grid specification.

 .text { display: grid; grid-gap: 1rem; grid-template-rows: repeat(3, 1fr); justify-content: center; } .text>div { height: 50px; display: flex; align-items: center; } .text img { height: 50px; max-width: 50px; } .text span { padding: 1em; } 

 <div class="text"> <div> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" /> <span>Zásielkovňa</span> </div> <div> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" /> <span>DHL</span> </div> <div> <img src="https://upload.wikimedia.org/wikipedia/de/thumb/1/1f/Slovensk%C3%A1_po%C5%A1ta_Logo.svg/2000px-Slovensk%C3%A1_po%C5%A1ta_Logo.svg.png" alt="posta" /> <span>Slovenská pošta</span> </div> </div> 

Answer 2

Use inline-block and adjust text alignment:

 img { padding-right: 1em; vertical-align: middle; margin:5px auto; } .text { display: inline-block; text-align: left; padding: 1em; border:1px solid; } body { /*I used the body but it can be any container*/ text-align: center; } 

 <div class="text"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50">Zásielkovňa <br> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL <br> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="posta" width="50" height="50">Slovenská pošta </div> 

Answer 3

wrap each line in divs with same width

 .text { width: 100%; } .row { width: 30%; margin: auto; height: 50px; line-height: 50px; } .row img { display: inline-block; } .row span { display: inline-block; vertical-align: top; } 

 <div class="text"> <div class="row"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50"> <span>Zásielkovňa</span> </div> <div class="row"> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50"> <span>DHL</span> </div> <div class="row"> <img src="http://obec-vinodol.sk/wp-content/uploads/2015/03/Slovensk%C3%A1_po%C5%A1ta_Logo.svg_.png" alt="posta" width="50" height="50"> <span>Slovenská pošta</span> </div> </div> 

Answer 4

At the moment you have 3 images with text next to it. For every line the text has a different length which is causing the different locations of the images.

What I'd do is create a container for both and center the container the right way like the snippet below:

 .container{ margin-left: 50%; margin-right: 50%; width: 300px; } img { padding-right: 1em; transform: translate(-50%, 0) } 

 <div class="text"> <div class="container"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50">Zásielkovňa </div> <div class="container"> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL </div> <div class="container"> <img src="http://obec-vinodol.sk/wp-content/uploads/2015/03/Slovensk%C3%A1_po%C5%A1ta_Logo.svg_.png" alt="posta" width="56" height="50">Slovenská pošta </div> </div>