如何在一行中对齐 3 张图像？

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 文件中的 class 名字前面，我在你的图片中添加了一些 class 名字。

.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 是 class 并且应该写成 .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

This is an experimental technology

Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

如何在一行中对齐 3 张图像？

How to allign 3 images in one row?

css

wordpress

row

inline

image