Question

我的页脚中有3个付款徽标，它们想要居中并排成一行怎么做？

sliki {
  text-align: justify;
}

sliki img {
  display: inline-block;
  width: 75px;
  height: 100px;
  padding: 7px;
  margin-top: -5px;
  float: right;
}

sliki:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<div class="sliki">
  <img src="//ssif1.globalsign.com/SiteSeal/siteSeal/siteSeal/siteSealImage.do?p1=www.prozis.com&amp;p2=SZ90-35&amp;p3=image&amp;p4=en&amp;p5=V0023&amp;p6=S001&amp;p7=https&amp;deterDn=" alt="" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/visa_96x56_675_17096.png" alt="" width="48" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/mastercard_96x56_676_17097.png" alt="" width="48" height="28" />
</div>

View on JSFiddle。
See the footer on my site.

Answer 1

你错过了'。'在你的css文件中的类名前面，我为你的图像添加了一些类名。

.sliki {
  position: relative;
  text-align: center;
}

.sliki img.credit {
  display: inline-block;
  width: 48px;
  height: 28px;
  padding: 7px;
  margin-top: -5px;
}

img.secure {
  width: 90px;
  height: 35px;
}

sliki:after {
  content: '';
  display: inline-block;
  width: 48px;
  height: 28px;
}

<div class="sliki">

  <img class="secure" src="//ssif1.globalsign.com/SiteSeal/siteSeal/siteSeal/siteSealImage.do?p1=www.prozis.com&amp;p2=SZ90-35&amp;p3=image&amp;p4=en&amp;p5=V0023&amp;p6=S001&amp;p7=https&amp;deterDn=" alt="" />

  <img class="credit" src="//static.sscontent.com/prozis/contents/logotypes/visa_96x56_675_17096.png" alt="" width="48" />
  <img class="credit" src="//static.sscontent.com/prozis/contents/logotypes/mastercard_96x56_676_17097.png" alt="" width="48" height="28" />

</div>

Answer 2

text-align然后float不要混用。

sliki是一个类，应该写成.sliki。

此外，text-align:justify对最后一行没有影响（即使也是第一行），使用或完成text-align-last https://jsfiddle.net/5ebL584w/1/以避免使用额外的伪

.sliki {
  text-align: justify;
  /* and instead :after 
  text-align-last:justify;
  */
}

.sliki img {
  display: inline-block;
  width: 75px;
  height: 100px;
  padding: 7px;
  margin-top: -5px;
  /*float: right;*/
}

.sliki:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<div class="sliki">
  <img src="//ssif1.globalsign.com/SiteSeal/siteSeal/siteSeal/siteSealImage.do?p1=www.prozis.com&amp;p2=SZ90-35&amp;p3=image&amp;p4=en&amp;p5=V0023&amp;p6=S001&amp;p7=https&amp;deterDn=" alt="" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/visa_96x56_675_17096.png" alt="" width="48" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/mastercard_96x56_676_17097.png" alt="" width="48" height="28" />
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last

这是一项实验性技术

由于此技术的规范尚未稳定，请检查兼容性表以了解各种浏览器的用法。另请注意，随着规范的更改，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

text-align-last CSS属性描述了在强制换行之前，块或行的最后一行是如何对齐的。

如何将3个图像分成一行？

2 个答案: