Search This Blog

Sunday, January 21, 2007

Centering the text and putting a centered caption below the photos


Centering Text

This post is to answer a question for a reader of my blogs who want the text centered and to have a caption below the photos. The easy way to center text is to work in the Compose Mode by clicking on the COMPOSE tab in the top right-hand corner of the post editor. Prepare your post in the Post Editor window in the normal way, and then when you are finished, highlight all the text, then click the Align Center tab in the Post Editor toolbar, and the text will all be center aligned.

Putting a caption for the photo

To put a caption for the photo, you have no choice, but to do it in the EDIT HTML mode. Upload a picture. By default, the picture will be uploaded to the top of the post editor irrespective of where your cursor is. I am going to upload a picture the remnants of an old Portugese fort in Malacca, Malaysia (copyrighted by Tourism, but can be used for the purpose of promote tourism to Malaysia. I am also posting this photo in the hope that you will visit Malaysia as Malaysia is having a Visit Malaysia Year now with lots of programs prepared for visitors. See Guide to Malaysia).
A'Formosa, MalaccaA'Formosa, Malacca, Malaysia
As I have mentioned in earlier posts, it will be useful to know a bit about HTML and CSS as it is very hard to avoid it even if you are using the New Blogger, just as you cannot avoid it now.
When I use the "Align center" icon above, what I have done is to surround the text with the <div style="text-align: center;"> and </div> tags, that is put <div style="text-align: center;"> at the beginning of the text, and </div> at the end of the text. All text that is placed between these 2 tags will be center-aligned.

When I uploaded the photo, if I switch to the EDIT HTML mode, I will see at the top of the HTML for the photo which is this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_jizoPL28qCY/RbKY7wUk7oI/AAAAAAAAAAc/1birSeBYlMI/s1600-h/A%27+Formosa,+Melaka.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_jizoPL28qCY/RbKY7wUk7oI/AAAAAAAAAAc/1birSeBYlMI/s320/A%27+Formosa,+Melaka.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5022244686822436482" /></a>
.
It will be above the <div style="text-align: center;"> tag. (This blog is still using the old (classic) template, but with the New Blogger template, the HTML will be slightly different, but similar). To place it elsewhere, highlight the whole HTML, cut and paste in the spot you want it to be. Regarding the caption, all you have to do is to look for the last </a> tag, and type in the caption, eg.
..id="BLOGGER_PHOTO_ID_5022244686822436482" />A'Formosa, Malacca, Malaysia</a>. This caption is centered because it is already included in the text-align center tags. If your texts are not center aligned, then you will have to type the caption as <div style="text-align: center;">A'Formosa, Malacca, Malaysia</div>.

Search engines cannot read pictures. For search engine purposes, and also so that text will be displayed when for some reasons the picture can't be displayed, add some description between the quotation marks in the alt"" attribute, eg alt="A'Formosa, Malacca, Malaysia". And for the caption to be centered, make sure it is pasted before the last </div> tag, otherwise you will have to center it yourself.

14 comments:

  1. Hello, Peter. I'm not sure if I explained what I am trying to do. I want the text centered just like in you blog, but with nothing on either side. So really what I meant was not the text being centered, but the blog page. I realized the Simple II template would do that perfectly, but then the header was not centered like with Minima. So I tried to replace the Simple II "head" with the Minima "header-wrapper," but couldn't get the thing to parse. I don't know HTML but it looks like I'm going to have to learn. Would it be easy for you to explain how to put the Minima head into the Simple II template? If so, I would really appreciate it.

    ReplyDelete
  2. Hi Ningen,

    I am a retired scientist, not a programmer. I learned HTML and CSS the hard way, mainly from w3schools.com, from trial and errors, from forums. I do a bit of tinkering with HTML and CSS but is not up to the job of suggesting to you what you need to do for a major thing like that. Suggest you try Google Blogger Help group.

    Peter aka Enviroman
    Enviroman Says

    ReplyDelete
  3. Oh help! I am trying to post a caption below my picture - and what continues to happen is it makes it a link (highlighted in blue) and puts it at the top of my post.
    I want the caption to go right under the picture. I've tried it several ways - can you help?
    My blog is www.jewlsntexas.blogspot.com - and the post I am working on is Snow- A Love Hate Relationship -
    Thanks!

    ReplyDelete
  4. Try choosing "center" for the photos and following the instruction in the post.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  5. This is awesome - and it totally worked - I just wish I could caption my picture and have it left or right! I like the picture to sit with wrapped text!
    Thank you very much for the helpful blog. I plan to be a regular visitor as I have much to learn about using blogger. Much different than my previous blog service!

    ReplyDelete
  6. Thanks i have everything centred now i just need to know how to centre the date. if you take a look at my blog you'll understand what i mean.

    Thanks

    ReplyDelete
  7. Do you know how centre the date?????

    ReplyDelete
  8. Do you know how the centre the date????

    ReplyDelete
  9. Thanks i have the date centred now.
    But how do i change the size of the date?? Its way to big for my liking. can you help me out??

    ReplyDelete
  10. Thanks for sharing mate, problem resolved..

    [http://alldailyupdatesandnews.blogspot.com]

    ReplyDelete
  11. Hi Peter,

    Would you know how to centre posts (image and post title) that are label searched. You can see what i mean on my website: http://tastynchic.blogspot.ca I have been searching high and low and cannot seem to find any information on it. I would really appreciate your help Thank you.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications