¿Puede alguien explicarme por qué las imágenes no están centradas en el medio? ¿Por qué se mueve DHL?

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>
  

enter image description here

1
Miroslav 10 sep. 2018 a las 11:10

4 respuestas

La mejor respuesta

Use inline-block y ajuste la alineación del texto:

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>
2
Temani Afif 10 sep. 2018 a las 08:51

CSS GRID se hizo para este propósito exacto.

Especificación de cuadrícula CSS.

.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>
3
DreamTeK 10 sep. 2018 a las 08:41

Envolver cada línea en divs con el mismo ancho

.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>
0
Chris Li 10 sep. 2018 a las 08:31

Por el momento tienes 3 imágenes con texto al lado. Para cada línea, el texto tiene una longitud diferente que está causando las diferentes ubicaciones de las imágenes.

Lo que haría es crear un contenedor para ambos y centrar el contenedor de la manera correcta como el fragmento a continuación:

.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>
0
Daut 10 sep. 2018 a las 09:30