CODEWITHSUNDEEP
htmlcss
Miroslav
Miroslav

Reputation: 315

Images not centered

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>

enter image description here

Upvotes: 1

Views: 179

Answers (4)

Casper
Casper

Reputation: 303

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>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273989

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>

Upvotes: 2

DreamTeK
DreamTeK

Reputation: 34287

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>

Upvotes: 3

Chris Li
Chris Li

Reputation: 2671

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>

Upvotes: 0

Related Questions