Html 如何在CSS中使一行图像居中、左对齐或右对齐

如果我在HTML中这样做（顺便说一下）：

30%宽度各：

我得到的是：一排居中的图像。看见

这正是我想要的。问题是，HTML5中完全不推荐使用

align

HTML属性，因此不应使用该属性，HTML5中大多数标记（包括

p

标记）都不推荐使用

width

属性，因此也不应使用该属性。所以，在我的GitHub页面Jekyll站点中，我尝试使用CSS，这样我就不依赖于不推荐使用的HTML属性

但是，我不知道如何在CSS中实现这一点。如何在CSS中实现这一点？请注意，我希望能够将这行图像向左、向右或居中对齐，就像在上面不推荐使用的HTML元素中设置

align=“left”

、

align=“right”

或

align=“center”

一样

这是我到目前为止尝试过的，但它创建了一行图像，这些图像保持左对齐：

/*在不换行的情况下居中对齐--元素沿着自己的直线移动*/
.Nowrap
{
显示：块；
浮动：无；
/*将左右边距都设置为“自动”，以使图像居中*/
左边距：自动；
右边距：自动；
/*宽度：60%*/
}

其他CSS类，我一直在努力获得我所寻求的对齐方式：

/*左对齐，元素右侧换行符对齐*/
.alignLeftWrap
{
显示：内联块；
浮动：左；
左边距：0px；
/*在元素与其右侧的文本之间提供间隙*/
右边距：15px；
/*宽度：60%*/
}
/*右对齐，将换行字对齐到元素的左侧*/
.alignRightWrap
{
显示：内联块；
浮动：对；
/*在元素与其左侧的文本之间提供间隙*/
左边距：15px；
右边距：0px；
/*宽度：60%*/
}
/*左对齐而不换行--元素按自己的行进行*/
.ALIGNTLEFTNOWRAP
{
显示：块；
浮动：无；
左边距：0px；
右边距：自动；
/*宽度：60%*/
}
/*在不换行的情况下居中对齐--元素沿着自己的直线移动*/
.Nowrap
{
显示：块；
浮动：无；
/*将左右边距都设置为“自动”，以使图像居中*/
左边距：自动；
右边距：自动；
/*宽度：60%*/
}
/*右对齐，不带换行符——元素在自己的行上*/
.alignRightNoWrap
{
显示：块；
浮动：无；
左边距：自动；
右边距：0px；
/*宽度：60%*/
}
/*强制此元素不环绕其上具有单词wrap的任何浮动元素。
因此，该元素将从新行开始，即使它尝试换行
而是围绕上述元素*/
.Nowraparoundove
{
明确：两者皆有；
}

参考资料：

[我的回购协议]

[我的回答]

---

我会把

display:flex和
对齐内容：周围的空格
，或
对齐内容：之间的空格
以及
对齐项目：居中
。
您可以尝试在父div上使用display:flex，并将其中的内容与对齐内容属性对齐，它与display:flex一起工作。这里有一个例子，如果我抓住了你的想法。只需尝试应用不同的值来调整内容属性：

CSS:

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

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

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