图像未居中答案

【问题标题】：Images not centered图像未居中
【发布时间】：2018-09-10 17:36:49
【问题描述】：

有人可以解释一下为什么图像不在中间居中吗？为什么那个 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>

【问题讨论】：

因为你没有相同的文字
你想让图片和文字相邻吗？
@Casper 是的，我需要将文本垂直对齐到居中的一行中的徽标和图像。
因为图片的名字，你必须把图片放在div中，并修复它们

标签： html css

【解决方案1】：

CSS GRID 正是为此目的而制作的。

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>

【讨论】：

我认为你使用 flexbox 和 grid 使这变得过于复杂了......只有一种技术就足够了：jsfiddle.net/Lmgp91w7/1
@TemaniAfif 你是对的，但这是我匆忙的回答。

【解决方案2】：

使用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>

【讨论】：

【解决方案3】：

将每一行包裹在相同宽度的 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>

【讨论】：

【解决方案4】：

目前您有 3 张图片，旁边有文字。每一行的文本都有不同的长度，这导致图像的位置不同。

我要做的是为两者创建一个容器，并将容器以正确的方式居中，如下面的 sn-p：

.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吗？有解释我需要做什么。