Question

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

this

Answer 1

CSS GRID就是为此目的而设计的。

CSS Grid specification.

 foo bar
0 10 20

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

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

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

Answer 4

目前，您有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>

Answer 5

这是因为在您的html代码中

<img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL <br>

是单行，如果您希望图像居中，文本下方则可以添加<br>

喜欢

<img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50"><br>DHL <br>

图片未居中

5 个答案:

CSS GRID就是为此目的而设计的。