Jamie: Created page with "= Simple Way to Center an Image in HTML = Although this method uses CSS to achieve the desired results, this is used so often that I prefer to have it as one of my top tips an..."

2021-01-16T10:28:53Z

Created page with "= Simple Way to Center an Image in HTML = Although this method uses CSS to achieve the desired results, this is used so often that I prefer to have it as one of my top tips an..."

New page

= Simple Way to Center an Image in HTML =
Although this method uses CSS to achieve the desired results, this is used so often that I prefer to have it as one of my top tips and categorize it in the HTML section instead of the CSS section! Often, I just want to slap together a simple quick page for a friend with a photo that has some meaning to us. In the past, I used to use tables to center items on a web page, but this method involves less lines of code to achieve the desired results.

I'll include the basic HTML formatting lines, and use dots(.) on 3 blank lines to indicate possible multiple lines of code before and after.

Here's the code:
<pre style="color:blue">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="EN">
<title>
Web Page Title
</title>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
<body>
.
.
.
<img src="ImageFileName.jpg" alt="ImageDescription" class="center">
.
.
.
</body>
</html>
</pre>

As you can see, it's pretty simple. Of course you will need to insert your own text where obviously appropriate!

Hope you find this helpful. I know I use this method all the time, and it's easily modifiable to suite your needs.

How to Center an Image on Your Page - Revision history

Jamie: Created page with "= Simple Way to Center an Image in HTML = Although this method uses CSS to achieve the desired results, this is used so often that I prefer to have it as one of my top tips an..."