English Deutsch Français Italiano Español Português 繁體中文 Bahasa Indonesia Tiếng Việt ภาษาไทย
All categories

I'm making my dad a website and just finished up an html, xhtml, and css tutorial for review and would like to know the html code for aligning an image in the center, left, or right area of the page using css.
not enclosing it in center tags.

2007-05-23 09:29:41 · 6 answers · asked by patrickt1994 1 in Computers & Internet Programming & Design

6 answers

Yep, center tags'll get you nothing but trouble!

style="float: left;" or style="float: right;" usually work for shoving the image to the side. You might want to shove it back up away from the absolute side by adding in, say,
style="float: right; margin-right: 1em;" or like that, see?

and you may have to play with "clear: right;" to make sure your img doesn't mess with what's above it...

and the list goes on

Sometimes it's best to put the img in its own div ahead of the paragraph; sometimes it's best to put the img within the paragraph. Usually, if it's right, you need to place it your html *before* the stuff to the right of which it's going to be floated...

For centering, things get tricky...often, a simple

will suffice but
sometimes depending on what you're trying to do in and around your img (like captions? associated text block?) you may need divs with "margin-left: auto; margin-right: auto;"

Good luck!

2007-05-23 09:47:37 · answer #1 · answered by fjpoblam 7 · 0 1

It depends on if you want text to flow around the image or not.

If you want it to be on a line by itself, you can use the "text-align" css attribute with the values "center", "left", or "right". In this case, though, you have to apply that attribute to a container object, such as a "div" that the image is in (and it could be that the image is the only thing in that container). This would look like this:



If, on the other hand you want the text to flow around the image, you can only align the image to the left or the right, and instead of "aligning" it you are "floating" it. To do this, you merely add the "float" attribute to the image with the value of "left" or "right". This would look like this:

2007-05-23 09:49:14 · answer #2 · answered by chewie007 3 · 0 1

If your elements have a class of "myClass", you'd select them like so: .myClass { color: #ff0000; } This would make the text in all the elements with a class of "myClass" red. The dot at the beginning is important; it signifies that the next word should be treated as a class.

2016-05-21 01:05:14 · answer #3 · answered by ? 3 · 0 0

Look on this site:

Learn HTML and about the technical bits of web design?

http://www.w3schools.com/html/

I had better get top answer for that - I pasted a whole bloody page off my own website then - I can't give you the link - it's spamming!

2007-05-23 09:53:47 · answer #4 · answered by Mike10613 6 · 0 2

Set text-align:center to the element that contains the image.

2007-05-23 09:31:46 · answer #5 · answered by Rex M 6 · 0 2

2007-05-23 22:00:58 · answer #6 · answered by Anonymous · 0 1

fedest.com, questions and answers