How to Center an Image on Your Page

From TheBestLinux.com
Jump to navigation Jump to search

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: 

<!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>

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.

Retrieved from "https://thebestlinux.com/index.php?title=How_to_Center_an_Image_on_Your_Page&oldid=947"