Here is the HTML markup:

<h2 style="text-align: center">Centering an image</h2>

<p style="text-align: center">Option 1: Use text-align: center</p>

<div style="text-align: center"><img src="eagle.jpg" width="136" height="102"></div>

<br>

<p style="text-align: center">Option 2: Make a class called aligncenter</p>

<style>

.aligncenter {

    text-align: center;

}

</style>

<p class="aligncenter"><img src="eagle.jpg" width="136" height="102"></p>

<br>

<p style="text-align: center">Option 3: Use the CSS display: block property</p>

<!-- The margin: auto; style can be assigned to a block element to center it.  

However, image tags are inline, not block elements, so we have to also 

assign a display: block; CSS style to make it work. -->

<img

src="eagle.jpg"

width="136" height="102"

style="

display: block;

margin-left: auto;

margin-right: auto;"

>

<br>

<!-- Option 3 can also be done using the <style> section to create a class -->

<p style="text-align: center">Option 4: Use display: block in the style section</p>

<style>

.marginauto {

    display: block;

margin-left: auto;

margin-right: auto;"

}

</style>

<img

class="marginauto"

src="eagle.jpg"

width="136" height="102"

>

<br>

<p style="text-align: center">Option 5: Simplify by using margin with 0 and auto</p>

<img

src="eagle.jpg"

width="136" height="102"

style="

display: block;

margin: 0 auto;"

>

<br>

<p style="text-align: center">Option 6: Replace HTML's width and height with CSS</p>

<img

src="eagle.jpg"

style="

display: block;

margin: 0 auto;

width: 136px; 

height: 102px;"

>

<br>

<p style="text-align: center">Option 7: Don't use < center >, as it is depreciated (obsolete)</p>

<center><img src="eagle.jpg" width="136" height="102"></center>

<br>