Изображения не центрированы

Кто-нибудь, пожалуйста, объясните мне, почему изображения не центрируются по центру? Почему переехал этот 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

потому что у вас нет того же текста

Temani Afif 10.09.2018 10:11

Вы хотите, чтобы изображение и текст находились рядом друг с другом?

Casper 10.09.2018 10:13

@Casper, да, мне нужно, чтобы текст вертикально выровнялся по логотипам и изображениям в одну строку по центру.

Miroslav 10.09.2018 10:15

Из-за имени изображений вы должны поместить изображения в div и исправить их.

Mohamed El Mrabet 10.09.2018 10:22
1
4
136
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

оберните каждую строку в div одинаковой ширины

.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>

На данный момент у вас есть 3 изображения с текстом рядом с ним. Для каждой строки текст имеет разную длину, что приводит к разному расположению изображений.

Что бы я сделал, так это создать контейнер для обоих и правильно центрировать контейнер, как показано в приведенном ниже фрагменте:

.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>

Достаточно близко. Не могли бы вы проверить img, который я добавил в сообщение? Есть объяснение, что мне нужно сделать.

Miroslav 10.09.2018 10:26

CSS GRID был создан именно для этой цели.

Спецификация CSS Grid.

.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>

Я думаю, вы слишком усложняете это, используя flexbox и grid .. Достаточно только одного метода: jsfiddle.net/Lmgp91w7/1

Temani Afif 10.09.2018 10:54

@TemaniAfif Вы правы, но это был поспешный ответ от меня.

DreamTeK 10.09.2018 11:29
Ответ принят как подходящий

Используйте inline-block и отрегулируйте выравнивание текста:

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>

Другие вопросы по теме