Random: A Quick Blogging Tutorial

How to Center Buttons, Text & Images
Written by e-Mom. Share on Twitter or FB. Subscribe in a Reader

Note to Subscribers: Please click through to Chrysalis to read this post. HTML code is not published in RSS feed.

Graphic designers like to use a grid system when arranging elements on a page. In print media, the edges of different design components usually line up in an organized "waffle-like" fashion.

Blogging employs a similar logic. While it's most appealing for text to be aligned to the left, it's nice to be able to center some elements on occasion. For instance, when all the buttons in your sidebar are centered, your blog looks cleaner, better organized, and more visually appealing.


If you're newer to blogging, you may not know how post a photo, embed a video, or add graphic buttons so they sit in the center of your page. It's very easy to learn the tags and use them whenever you want.

If you're newer to blogging, you may not know how post a photo, embed a video, or add graphic buttons so they sit in the center of your page.

For example, to center a button in your sidebar, simply type <"center"> on the left side of your button code, and then type <"/center"> on the right side. Hit publish, and voila! Now your button is no longer hugging the left side of the column. (NOTE: Be sure to remove the quotation marks.)

You can use <"br /"> before or after your buttons to add space between them. This eliminates that jumbled, haphazard appearance, and gives your reader's eye a place to rest when scanning. (NOTE: Again, do not include the quotation marks.)

That's all there is to it! Experiment with your code, and you'll quickly learn what looks good, and what really looks awful.

Let me know if you have any questions!

Photo: petitecorneille (Flickr)