通过仅更改图像属性的CSS中心图像

2024-05-05 • 问答

我已经自动生成了可以生成这种HTML的HTML（几乎不可能更改，因为它是由第三方库生成的）

<p>
<img src="...">
<img src="...">
</p>

它会生成如下屏幕截图：

我希望能够将2张图像水平居中（这里有2张，但我们可以有1张或更多张）。

添加了：完整的html

<div class="innercontent" data-slide-fit="fit" style="font-size: 32px;"><h1>Images</h1>
<ul>
<li>Images can be local or from Internet. It is recommended to use local images for better performances.</li>
</ul>
<p><img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;">
<img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;"></p>
<ul>
<li>They are streched or resized in order to occupy available space while giving room for other elements.</li>
</ul>
</div>

如果我们认为图像的宽度相同，则可以使用平移和边距对此进行近似。这是一个近似值，因为图像之间存在微小的空间

<p>
 <img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%)">
</p>

<p>
 <img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%)">
 <img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-100%)" >
</p>

<p>
 <img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%)">
 <img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-150%)" >
 <img src="https://picsum.photos/id/4/150/100" style="transform:translateX(-150%)" >
</p>

或者像下面这样避免包装。

<p>
 <img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%);">
</p>

<p>
 <img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%);margin-right:-150px;">
 <img src="https://picsum.photos/id/3/150/100"  >
</p>

<p>
 <img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%);margin-right:-225px;">
 <img src="https://picsum.photos/id/3/150/100"  >
 <img src="https://picsum.photos/id/4/150/100" >
</p>

您可以将一个类添加到p标签父级：

p.image-center {display：flex; align-items：center; justify-content：center;}

通过仅更改图像属性的CSS中心图像

a710262403 回答：通过仅更改图像属性的CSS中心图像

大家都在问