How to Center an Image in HTML

PacePlace

Editor

posted on 10 years ago — updated on 1 second ago

26
views

Image alignment is an important skill to learn when coding webpages. Unfortunately, as code changes, some HTML tags are deprecated and are not recognized by all web browsers. Try these methods to center an image in HTML. If they don’t work, consider coding in Cascading Style Sheets (CSS).

Steps

Aligning in Text

Don’t use the word “center” in your tag. In HTML coding, you can center text, but you must identify image alignment with the word “middle.” An image is not a line element, so it is identified in relation to other elements.

Start a new line of code. Use a paragraph tag to indicate that a text line is beginning. Start your tag with

then write your text.

Insert the image by typing ”image

Specify the alignment of your image. Type align=”middle”> This is the end of the image portion of your tag.

Add more text. Then, close the tag with

. For example, your entire tag could look like this:

We’re learning about HTML. ”dancing Our example is complete.

Aligning in a Center Tag

Create a new element and center that element. You can contain the image within that centered element. However, it will create extra spaces around your element.

Start a new line of code. Begin by centering the element. Type

Add your image tag. Type ”dancing

Specify the height and width of the image. Enter height=”200”width=”200”> or another size of your choice. This is the end of your image portion of the tag.