How to have a row of images centered, aligned left, or aligned right in CSS

Question

If I do this in HTML (which works perfectly inside GitHub markdown readmes by the way):

30% width each:
<p align="center" width="100%">
    <img width="30%" src="https://i.stack.imgur.com/RJj4x.png"> 
    <img width="30%" src="https://i.stack.imgur.com/RJj4x.png"> 
    <img width="30%" src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

I get this: a nicely-centered row of images. See my demo here.

This is exactly what I want. The problem is, the align HTML attribute is deprecated entirely in HTML5, and therefore shouldn't be used, and the width attribute is deprecated in HTML5 for most tags, including the p tag, and so it also shouldn't be used. So, in my GitHub Pages Jekyll site I'm trying to use CSS instead, so I don't rely on deprecated HTML attributes.

I can't figure out how to do this in CSS, however. How can I do this in CSS? Note that I'd like to be able to align this row of images, left, right, or center, just as can be done by setting align="left", align="right", or align="center" in the deprecated HTML element above.

Here's what I've tried so far, but it creates a row of images which remains aligned left:

<style>
/* align center withOUT word wrap--the element goes on its own line */
.alignCenterNoWrap
{
  display: block;
  float: none;
  /* Set both the left and right margins to `auto` to cause the image to be centered. */
  margin-left: auto;
  margin-right: auto;
  /*width: 60%;*/
}
</style>

<div class="alignCenterNoWrap" style="width:100%;">
    <img style="width:30%;" src="https://i.stack.imgur.com/RJj4x.png">
    <img style="width:30%;" src="https://i.stack.imgur.com/RJj4x.png">
    <img style="width:30%;" src="https://i.stack.imgur.com/RJj4x.png">
</div>

Other CSS classes I've been working on to try to get the alignment I seek:

/* align left WITH word wrap to the right of the element */
.alignLeftWrap
{
  display: inline-block;
  float: left;
  margin-left: 0px;
  /* provide a gap between the element and the text to its right */
  margin-right: 15px;
  /*width: 60%;*/
}

/* align right WITH word wrap to the left of the element */
.alignRightWrap
{
  display: inline-block;
  float: right;
  /* provide a gap between the element and the text to its left */
  margin-left: 15px;
  margin-right: 0px;
  /*width: 60%;*/
}


/* align left withOUT word wrap--the element goes on its own line */
.alignLeftNoWrap
{
  display: block;
  float: none;
  margin-left: 0px;
  margin-right: auto;
  /*width: 60%;*/
}

/* align center withOUT word wrap--the element goes on its own line */
.alignCenterNoWrap
{
  display: block;
  float: none;
  /* Set both the left and right margins to `auto` to cause the image to be centered. */
  margin-left: auto;
  margin-right: auto;
  /*width: 60%;*/
}

/* align right withOUT word wrap--the element goes on its own line */
.alignRightNoWrap
{
  display: block;
  float: none;
  margin-left: auto;
  margin-right: 0px;
  /*width: 60%;*/
}


/* Force this element to NOT wrap around any floating elements above it which have word wrap.
Therefore, this element will begin on a new line, even if it would otherwise try to wrap
around the above element instead. */
.noWrapAroundAbove
{
  clear: both;
}

References:

1. [my repo] https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md
2. [my answer] GitHub README.md center image

Answer 1

You can try to use display: flex on parent div and align content inside it with justify-content property, that works in conjunction with display: flex. Here is an example, if I caught right your idea. Just try to apply different values to justify-content property: https://jsbin.com/quduwavene/1/edit?html,css,output

CSS:

.alignCenterNoWrap
{
  display: flex;
  justify-content: center;
}

.alignCenterNoWrap a {
  dislay: block;
  width: 30%;
  margin: 0 5px;
}

.alignCenterNoWrap img {
  display: block;
  width: 100%;
}

Answer 2

I would put display:flex; and justify-content: space-around, or justify-content:space-between as well as align-items:center in CSS on the alignCenterNoWrap.