Centering Images Within My HTML Code - html

Question

I am attempting to center images located in my HTML code as they are currently all showing to the left side. This is within the program Infusionsoft, so not sure if it's just the system that won't let me center with everything I have tried, or if I'm just doing it incorrectly. Any push in the right direction would be helpful.
<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

There are two different ways of centering your images, individually, or as a group.
Individual:
<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>
Added display: block and margin: 0 auto to each image
Group:
<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>
Added text-align: center to the wrapper
Fiddle: https://jsfiddle.net/4mnLLxz7/
I changed your height and widths to better present the fiddle, you only need to edit those back to what they were originally.
If you do not wish to use display: block then you can look into flex which is a great tool.
CSS | Flex