In this tutorial:

Images can be incorporated into your website in various way. They can be aligned and floated to allow the images to be placed in particular location in the page. How you want to display the images will determine whether you will align or float the image.

Aligned images do not wrap text around them. Aligning images will only position the image left, right, or center with the text following before and after the image. Aligning leaves quite a bit of white space on your site. You will see the white space when you go though the aligning section.

A floated image will allow the text to wrap around the image like a regular book or newspaper would do. Images can also be floated so they appear horizontally on your site. This is good for displaying images like a gallery. The following sections will explain how to float and align images using CSS.

Left, center, and right align

Images can be aligned left, right, and center using the div tag and an inline CSS style. Text DOES NOT wrap around images that are simply aligned. The following explains how to align your images left, right, and center using CSS.

Left Align

The line of code below is for aligning an image to the left.

<div style="text-align: left"><img src="/support/image/your-image.png" width="100" /></div>
Image Sample 1

Center Align

The following line of code is for centering an image.

<div style="text-align: center"><img src="/support/image/your-image.png" width="100" /></div>
Image Sample 2

Right Align

The folowing line of code contains the CSS attribute for aligning right.

<div style="text-align: right"><img src="/support/image/your-image.png" width="100" /></div>
Image Sample 3

Floating images using CSS

Floating images allows images to horizontally align with each other and allows text to wrap around the image. The following will explain horizontally aligning images and floating images around text.

Floating images left to wrap text

<img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />

Image Sample 4Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci. Vivamus at dolor a nibh aliquet luctus. Duis imperdiet mi id lorem pellentesque tempus. Ut quis felis posuere tellus feugiat ultrices. Praesent id tortor non tellus viverra placerat. Vivamus euismod nisi a leo interdum molestie ornare tellus consectetur.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Proin faucibus convallis elit. Maecenas rhoncus arcu at arcu. Proin libero. Proin adipiscing. In quis lorem vitae elit consectetuer pretium. Nullam ligula urna, adipiscing nec, iaculis ut, elementum non, turpis. Fusce pulvinar.

Important! Floated images will overlap each other if the float is not cleared. Make sure you are placing a clear float code after each section your image is floating in. Below is the code to clear your floats.

<br style="clear:both" />
Here is an example:
<p><img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci. 
<br style="clear: both;" /></p>

 

Floating images right to wrap text

<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />

Image Sample 5Pellentesque mattis tincidunt porttitor. Maecenas condimentum iaculis ligula, sit amet scelerisque nibh aliquam in. Quisque ornare gravida est ut fermentum. Nam venenatis pretium enim, in laoreet nibh tristique sit amet.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Aenean sed turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum.

Floating images left horizontally

This will use the same code as before (See below). The images are simply placed one after another to get them to float horizontally.

<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />

Image Sample 6 Image Sample 7 Image Sample 8 Image Sample 9

Floating images inline with each other is a nice way to display your images as a Gallery. This concludes How to Align and float images with CSS. Join our community now to receive specialized help with HTML and design, special offers, and cool gear.

Looking for more help with CSS? Check out our introduction to CSS guide!

Continued Education in Course 102: Inserting Images into a Website
You are viewing Section 5: Align and float images with CSS
Section 4: How to make an Image a Link
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-05-04 5:13 am

This is a good introduction to css for the beginners

n/a Points
2014-08-06 12:00 pm
I would not call myself a CSS beginner, but neither would I call myself an expert. I have been playing with HTML and CSS for about 8 years, just started getting deeper into HTML5 and CSS3. Articles like this are sometimes a kick in the pants for me and reminds me of things I already know, just not thinking about.
Thanks for the reminder!
n/a Points
2014-08-11 8:15 am

Hi,

Thanks for the code and the effect of the cod.

Its help me to set my image name in the center after the image.Thanks agian.

n/a Points
2014-08-18 5:40 am
Keep keeping it simple for easy understanding.
n/a Points
2014-10-18 3:04 pm

Thanks for your sharing, great knowledge.

Thnx

n/a Points
2014-11-05 1:20 pm

I'm a bigginer trying to follow this course step-by-step but i got stuck.

Can anyone help me understand the margin used in floating images:

  ( margin: 0px 0px 15px 15px)

Thank you ver much!!!!

Staff
10,994 Points
2014-11-05 1:42 pm
Hello Gasana,

Thank you for your question. The margin is in pixels, and goes counter clockwise (top, right, bottom, left).

For example this (margin: 0px 0px 15px 15px), would result in this:
Top margin: 0px

Right margin: 0px

Bottom margin: 15px

Left margin: 15px

So if you wanted a 15 pixel margin on the top of the image too, you would change it to:
(margin: 15px 0px 15px 15px)

If you have any further questions, feel free to post them below.

Thank you,
John-Paul
n/a Points
2014-11-06 5:25 pm

Hi John-Paul,

How about aligning an image used as a link. I want to use a small image instead of the word for "Contact" but it sits slightly above from the rest of the meny text links. I tried align:"bottom", vertical-align:"bottom" and align:"baseline", but the image never moved. Any other tricks to get the image to sit in line with the text in other menu links (the menu is horizontal)?

Thanks!

Staff
10,994 Points
2014-11-06 5:39 pm
Hello Miguel,

Thank you for your question. It really depends on your site, if you can provide a link we'd be happy to test further.

But, you may want to try testing the vertical-align.

Possibly:
vertical-align: bottom;


Thank you,
John-Paul
n/a Points
2014-11-06 6:03 pm

Hi John-Paul,

Tried vertical-align: bottom; too. Admittedly I did it in html, right after the img src in the link for the contact page, not in the css, but it did nothing for me.

The link to the page is www.havana-today.com I just put it up (still in design) for you to have a look.

Thanks!

Staff
10,994 Points
2014-11-06 6:42 pm
Hello Miguel,

Thank you for the information. This article and my previous response are only in regards to CSS, and not HTML.

If you want to work with the image in HTML, please see this img tag reference. It explains the options for using the img tag in depth, however, I recommend doing this in css.

I could not identify the specific CMS you are using, but keep in mind your theme/plugins may be over riding the code you are working with.

I see the envelope on the top right of the page. While it is slightly above the text next to it, the underline underneath (it appears when you mouse over) is lined up with the rest of the menu. So, the bottom does seem to be aligning.

It really boils down to how you want to code the site, and your comfort level. But you may want to try aligning the top of the other menu items with the top of the envelope, or making the header bar larger to accommodate the envelope sliding down.

Thank you,
John-Paul
n/a Points
2014-11-06 6:59 pm

Hi John-Paul,

Yes, my issue was meant to be a css solution. Apologies for not making that clear. I tried to solve it in both ways with no effect. I'll try to align them on the top. That may be the way to go. Thank you for your advice, it is helpful.

Miguel

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

12 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!