Question

我正在尝试将位于我的HTML代码中的图像居中，因为它们当前都显示在左侧。这是在Infusionsoft的程序中，所以不确定它是否只是让我不能使用我尝试的所有内容的系统，或者我是不是错误地做了。任何正确方向的推动都会有所帮助。

<div style="width:1000px; height:1000px; border:0px; padding:0px;">
<a href="ImageLocation1">
<img alt="single.png"   src="ImageSource1" style="width:280px; height:614px; border:0px solid blue;  float:left;" />
</a>
<a ImageLocation2">
<img alt="Corporate.png"src="ImageSource3" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
<a ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
</div>

Answer 1

有两种不同的方式可以将图像单独或作为一组进行居中。

个人：

<div style="width:200px; height:200px; border:2px solid red; padding:0px;">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;" />
</a>
<a href="ImageLocation2">
<img alt="Corporate.png" src="ImageSource3"  style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;">
</a>
<a href="ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;"/>
</a>
</div>

为每张图片添加了display: block和margin: 0 auto

组：

<div style="width:200px; height:200px; border:2px solid red; padding:0px;text-align:center">
<a href="ImageLocation1">
<img alt="single.png"   src="ImageSource1" style="width:48px; height:61px; border:0px solid blue;" />
</a>
<a href="ImageLocation2">
<img alt="Corporate.png" src="ImageSource3"  style="width:48px; height:61px; border:0px solid blue;">
</a>
<a href="ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:48px; height:61px; border:0px solid blue;" />
</a>
</div>

将<{1}}添加到包装器

小提琴：https://jsfiddle.net/4mnLLxz7/

我改变了你的身高和宽度以更好地呈现小提琴，你只需要将它们编辑回原来的那些。

如果您不想使用text-align: center，那么您可以查看display: block这是一个很棒的工具。

CSS | Flex

在我的HTML代码中居中图像

1 个答案: