Center Image - Remove Text Wrapping

[EnnisP]

I use WordPress Platform on a self hosted site.

Most of my images are floated left or right, with text wrapping, and that suits me fine.

But, right now I have an image I would like to center and remove the text wrapping for.

I've tried several things but so far, no luck.

My CSS code for images is:

img.centered {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 padding: 0px;
}

img.alignnone {padding: 0px; margin: 0px 0px 10px 0px; display: inline;}

#contentleft p a img.alignright { 
 float: right; 
}

/* amazon reloaded */
#contentleft p a img { 
 float: left; 
 /* padding-top: 10px; padding-right: 15px; padding-bottom: 10px;*/
 margin:10px 15px 10px 0px;
 border:1px solid #ccc;
}

/* From Abduraooft - codingforum
#contentleft p a img.alignnone{
float:none;
margin:10px auto;
display:block;
} */

img.alignright {padding: 0px; margin: 0px 0px 10px 10px; display: inline; float: right; }

img.alignleft {padding: 0px; margin: 15px 10px 10px 0px; display: inline;}

.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.alignright {float: right;}
.alignleft {float: left;}
.wp-caption {margin: 0px; padding: 0px;}
.wp-caption img {margin: 5px 0px 10px 0px; padding: 0px; border: 0px;}
.wp-caption.alignright img {padding: 5px 0 0 15px;}
.wp-caption p.wp-caption-text {
 margin: 0px;
 padding: 5px 0px 0px 0px;
 font-size: 10px;
 font-style: italic;
 font-weight: bold;
 line-height: 12px;
 text-align: center;
}

The code for the image I want to center is:

<a href="site-URL.jpg"><img src="site-URL.jpg" alt="" title="Character Influence 3" width="411" height="192" style="aligncenter size-full wp-image-5580" /></a>

Since the image is wide enough (411) to fill most of the column (500) without centering I have tried inserting several lines of &nbsp;<br /> which I'm pretty sure is cheating and it really doesn't look great. :( Very frustrating.

Obviously, the image would be visually more pleasing if centered.

If anyone could help me figure out how to center this one image and remove the text wrapping, I would be forever in your debt. :)

[lucy24]

It would be a heck of a lot easier if you could persuade yourself to put a paragraph break where the image is to go.

My eyes glazed over at all that code. Did you try defining a floated span with width = 100% and plopping the image into that?

This worked in six out of six browsers, including-- incredibly-- my prehistoric version of MSIE* for Mac that I've only lately discovered will still run. The image is a 300x300 box made for testing purposes. Didn't try it in a proper document with DTD and all the fixins, just typed in some blahblah and saved with html extension. I hope this is not one of those cases where doing it right makes the thing not work ;)

<div style = "margin: 2em;">
<p>blah blah blah blah blah {add a bunch more text here} 
<span style = "float: right; padding: 1em 0; margin: 0; width: 100%; text-align: center;">
<img src = "picture.png" width = "300" height = "300" alt = "box">
</span>
blah blah blah {and more here}</p>
</div>

* Well, sort of. It started the span at-- I assume-- the exact point I declared it, instead of going to the end of the line of blahblah before breaking for the image.

[devangan]

In html have image attribute
plz use align=center in img tag attribute.
sure this work i hope

[EnnisP]

Sorry Lucy. I know that is a lot of code. I included it because I know the problem/solution is in there somewhere and I'm not savvy enough to figure it out.

I appreciate your response but I'm not sure what to do with that either.

I need someone to say step 1, do this. Step 2, do that and so on.

I know, I'm dense, but can you help?

[EnnisP]

Hey devangan. Like I said to Lucy, I'm not sure what to do with your advice either.

[lucy24]

Try a direct cut-and-paste. Take the snippet I posted and paste it into your existing document. You can delete it later; it won't leave any mess behind ;) Change the <img> part to match the name and size of your real picture.

Does that look the way it's supposed to?

The <img align="blahblah"> form will work in html 4, but is already deprecated; it is absent from html 5. The "text-align" property is not actually supposed to work in spans, but it does. Maybe there's an exemption for floats that I can't find.

:: detour to w3c, where I am fascinated to find an HTML 5 draft dated April 2012 ::

[rocknbil]

plz use align=center in img tag attribute.

The align attribute has been deprecated since HTML 4, along with font and others.

But, right now I have an image I would like to center and remove the text wrapping for.

Images are by default inline elements. This (one of the reasons) why you're having trouble with it (and the only reason text-align:center will work in some cases.) As for "no text wrapping," you may need to ask for help from another element. :-)

The problem is you've applied style,

<a href="site-URL.jpg"><img src="site-URL.jpg" alt="" title="Character Influence 3" width="411" height="192" style="aligncenter size-full wp-image-5580" /></a>

.. and what you need is class. "aligncenter" doesn't have the same padding and margin as "centered" so you can change it to "centered" or take the suggestion below.

The class "aligncenter" does the same thing as the class centered (almost exactly) except for the padding and margins. So reduce class "centered" like so,

img.centered {
margin-bottom: 10px;
padding: 0px;
}

and apply BOTH classes to the image.

<a href="site-URL.jpg"><img src="site-URL.jpg" alt="" title="Character Influence 3" width="411" height="192" class="aligncenter centered size-full wp-image-5580" /></a>

The only problem is now "centered" is a poor name for this selector, so you may want to rename it to something like "image-padding" or something. Not real important at this point . . .

Now for the wrapping: Text may still "float around" this image. To avoid that you need a clearing element:

<div style="clear:both"></div>

You may already have a clearing element in Wordpress, and if it's stock wordpress code, it will be named "clear"

.clear {
clear:both;
}

(I always try to avoid names that are in use by CSS, such as clear, center, text-align, etc. But that's just me.)

If you still have this class in your CSS, you can just assign the class "clear" to the div. All together:

<a href="site-URL.jpg"><img src="site-URL.jpg" alt="" title="Character Influence 3" width="411" height="192" class="aligncenter centered size-full wp-image-5580" /></a>
<div class="clear"></div>

An aside, since this image is wrapped in an anchor, the anchor itself may be giving you grief. The only way to be sure is to view the page in Firefox with the Firebug extension installed (or use the new "Q" extension, which I don't like) to see which elements are getting in your way.

A second aside, ALT is a required attribute in any language, use it instead of title. :-)

[EnnisP]

Thanks rocknbil,

That worked! I don't know why but putting the clear <div> around the image worked even without "centered" in the code.

But I'm curious. If the "title" attribute has been deprecated is there any way to stop it from being inserted automatically every time I upload an image?

It is always inserted automatically. I don't have an option to choose it or not, it is just there.

How would I change that? And, should I manually go through and remove the "title" element on all my images?

Just so I understand. You're saying I can replace the word "title" with the word "alt" and it will do the same thing. I haven't actually changed that part of the code yet.

Anyway, thanks again. I really appreciate the help. It solved a problem I have struggled with for a very long time!

[topr8]

If the "title" attribute has been deprecated

title is not depricated, it is a universal attribute, useable in all html tags:

[dev.w3.org...]

title and alt are different, alt describes the image, title could describe its function:
eg. alt="red circle" title="panic button"

[lucy24]

The alt is what you see if you don't see the image. The title is what you see if you do see the image.

If the image is fancy text, the alt and title should say the same thing. Otherwise not.

[EnnisP]

Thanks topr8,

I read those documents and it clears things up a bit.

I'm still not sure what to put in my alt attribute. My images are usually preceded and followed by replacement text. If I use "alt" the way the document stipulates I would actually be repeating the text around the image.

But, thank you for the helpful information.

[EnnisP]

Thanks lucy24,

That further clarifies the difference but all of my alts are empty, i.e., there is not text.

As I mentioned to topr8, I usually introduce and follow the image with explanatory text so anything I put in the "alt" would be repetitive.

Not sure what to do about that. Actually, I'm not even sure when images wouldn't show.

It's all very interesting.

Thanks to everyone for the help on this. I have learned a lot through this thread.

[rocknbil]

Right, title is not deprecated - but "alt" is required for valid (X)HTML. It is intended for readers that do not render images (such as search engines*) and to assist those who can't see images (screen readers for the blind, for example.) A screen reader will read aloud "Company logo". Just a two or three word description of what's in that image (* again! :-) )

Many designers eliminate them or leave them empty because they don't like it when text pops up over their images. Your pages will be fine without them, and an empty alt still validates. When you go to insert images in W.P., there is a field for the alt attribute. You can populate it from there.

* If you have no other motivation for using the alt attribute: since alt's are indeed read by search engines, they can assist white hat SEO strategies. Don't stuff them with keywords, keep it relevant, but it does help.

[EnnisP]

Yea, I think I misunderstood what you originally said about "title" and "alt" issues. Not your fault, mine. But what you have just said makes a lot of sense, especially the keyword part.

Thanks

[topr8]

... also further to rocknbil's point regarding valid (x)html as i'm feeling geeky.

AFAIK an empty alt attribute is technically valid. eg alt="" whereas a missing one is invalid.

[lucy24]

Right. The html validator doesn't look at the contents of an attribute, it only checks that it's present. An empty alt is appropriate when the image is purely decorative. Otherwise you can often use a generic "see text" or "see caption" so the image-less reader knows you didn't simply flake out on them ;)

The css validator goes one step further by checking whether a property uses a valid system of naming or measurement. For example you can't say "width: green" or "background-color: 100em".