如何将 3 个图像排成一行？答案

【问题标题】：How to allign 3 images in one row?如何将 3 个图像排成一行？
【发布时间】：2017-07-21 19:14:46
【问题描述】：

我的页脚中有 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..

【问题讨论】：

为你尝试过的东西添加一些代码，最好是 jsfiddle.net 链接或其他东西。没有任何代码，很难说你做错了什么。
使用display: inline-block;
这是 JSfiddle。 jsfiddle.net/5ebL584w 工作正常，但在我的网站上没有对齐。什么问题？
另外，你的css类前面没有点（。）
文本对齐然后浮动不要混合。 , sliki 是一个类，应该写成 .sliki 。此外， text-align:justify 对最后一行没有影响（即使也是第一行），使用或完成 text-align-last jsfiddle.net/5ebL584w/1

标签： css wordpress image row inline

【解决方案1】：

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 属性描述了一个块或一行的最后一行，在强制换行之前，是如何对齐的。

【讨论】：

【解决方案2】：

你错过了“。”在您的 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>

【讨论】：