Can You Float?

Cursor Control

Here's a standard Blogger upload, positioned in the center by selecting "center" during the upload.


The image is centered as the column width changes, but the cursor switches to a hand while it is anyplace on the image's line (unless you are using the world's most advanced browser.)

When "center" is selected, the image, which is normally an inline element, is converted to a block element. That allows an 'auto' margin: auto means equal left and right margins.

When an element is 'block', it owns the line. In normal flow, it is alone on the line, and there is a line-break before and after the element. So, maybe the cursor's behavior makes sense.

Can the behavior be modified? There may be a real way to do it, but that means wading through Html and css specs, which is a lot like reading legal writings: the truth may be there, but where?

I change the code a little. I will say that I am not a coder, but I hand-markup all Html that I do, so I may look at things differently than many Bloggers.

Give it a good test and I'll tell you how I did it.

When you upload to Blogger using 'center', the code looks something like this, and I am trimming some unneeded code:

<a href="http://blogspot.com/snow_line_200.jpg">
<img style="margin: 0px auto 10px; display: block;
text-align: center; cursor: pointer;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o
/SMtKAqTzHWI/AAAAAAAAAsc/oHQy7Wfq2kw/s400
/snow_line_200.jpg" alt="" id="BLOGGER_PHOTO_ID_
5245367566220860770" border="0" /></a>

The important part is in red, with some surrounding code in blue. Notice how the image is changed to a block element. Reading the margin: top=0px; right/left=equal; bottom=10px.

To limit the hand to the image only, I wrap the full image code in a <div> and move the margins into the <div>s style. I also limit the width of the <div> to the total of the image width + the padding + the border width. In this case I just make it the image width of 200px. Many templates set padding of 4px and a border of 1px. So, that would be 200 + 8 + 2 for a <div> width of 210px. The <div> is centered, and the image is an inline element in the <div>. If the width is not set, the image will not center.

Also, the image is no longer a block element, so remove from the image's style. Here's the code for the second image:

<div style="width:200px;margin: 0px auto 10px;">
<a href="http://blogspot.com/snow_line_200.jpg">
<img style="text-align: center; cursor: pointer;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o/SMtKAqTzHWI
/AAAAAAAAAsc/oHQy7Wfq2kw/s400/snow_line_200.jpg" alt=""
id="BLOGGER_PHOTO_ID_5245367566220860770" border="0" />
</a></div>

Notice the closing </div> at the end, there is no 'display: block' in the <div> style, as it is a block element already.