Search code examples
csswordpressimagerowinline

How to allign 3 images in one row?


I have 3 payment logos in my footer that want to have centered and aligned in one row.
How to do that?

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


Solution

  • text-align and then float do not mix.

    sliki is a class and should be written .sliki .

    Also, text-align:justify has no effect on the last line(even if also first), use or complete with text-align-last https://jsfiddle.net/5ebL584w/1/ to avoid using an extra pseudo

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