Jump to content

Centering Image W/ Captions


Recommended Posts

The center tag was deprecated in HTML 4.01 and is not supported in XHTML. In my opinion, it should be forgotten and never used.


There are several W3C compliant ways of centering your images and captions. One would be to edit the CSS for the parent element. For example, in a page on your site that I viewed, the image that you centered is in a div class="textwidget". If you can find the CSS declarations for that class, you can add a line

>text-align: center;


That could create problems, however, if there are other cases where this class is used that you do not want centered. Therefore it would probably be best to add a class in your CSS file like this:

.center_txt {
   text-align: center;

then, in the html for the images that you want centered add center_txt to the class attribute of the parent element.

<div class="textwidget"> 

would become 
<div class="textwidget center_txt">

You could also add an inline style attribute, but if you are going to apply it in several places,
it is easier to just add a class to the stylesheet.

Edited by Bob Crabb
Link to comment
Share on other sites

After posting that, I realized that you might not want everything in the box centered. For example if you want the captions to be left justified, but the image centered, then you would wrap the img tag (and anchor if it is linked) in a div with either inline style or class that would center, as described in my previous post.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...