Image positioning without being able to change html - an odd one


I’m in an unusual css situation, the html CAN NOT be altered. Let me explain briefly… Calibre is a program which provides tools for ebooks / ebook readers, among it’s capabilities is the ability to run ‘recipes’ (python code) which the user community have created. These enable the downloading of -typically- news web sites and blogs, and conversion into an ebook format for reading on your ebook reader.

Recipe’s provide functionality for keeping and removing sections of the original html - in the recipe I am writing for instance I keep-only the div class ‘story-body’ (and everything within it) for each page, this then becomes the body of the individual html pages which are used to build the ebook. Although I can’t change the html, css can be added to change the look of the page.

I have a problem formatting the images for the ebook’s pages. The html looks like this example:

<div class="caption">

  <img src="/image/path/image.jpg" width="226" height="282" alt="Alt Text" />

  <span style="width:226px;">Caption to accompany image</span>


The html is consistent - the span style width is always set to the same width as the image.

What I need to do is to construct some css to position the image neatly with the descriptive caption text below the image. One problem is that the images vary is size substantially, some are just 200px in width, others as much as 800px. So I can’t float a box on one side using 40% of the width of the page, as some large images will be of a size which is as much as 90% of the width of an ebook’s total width.

What I would like is for the image to be centered horizontally with the caption text positioned below the image and with the caption text extending either no wider than the image itself, or no wider than an extra 15% on each side of the image. Achieving this without being able to change the html has proved very hard for me - after all I am a software developer not a web developer, and I’ve almost no css experience. I spent over 3 hours trying to achieve this yesterday and failed dismally - now it’s time to ask the pros.

One thing to note by the way is that in the recipe it is possible to automatically remove html tag attributes. So in the code snippet above I could have the width=“226” and/or height=“282” removed from the img tag or the style=“width:226px;” removed from the span tag. As stated, any css which I want can be added.

Please help, I’ve been pulling my hair out over this one.

Many thanks.

Not totally sure of all the parameters here, but you could try something like:

.caption img, .caption span {display: block; text-align: center;}

Thanks so much Ralph. I can’t believe how simple it was. I guess I got carried away setting and clearing all kinds of values and I should have remembered to keep it simple.

Your code didn’t quite work, but it did after I added auto margins, like this:

.caption img, .caption span {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;

I’m slightly embarassed to ask, but since posting I’ve descovered a variation in the way images are displayed in the HTML which does not work with your code. Being so inexperienced with css and not really understanding it, I haven’t managed to alter or add to your css to make the variation work. The html variation looks like this and the problem is that the text does not get centered:

<span style="width:466px" class="caption">
<img src="/image/path/image.jpg" width="466" height="282" alt="Alt Text"/>
Caption to accompany image
</span> opposed to the original (posted in 1st post) which is:

<div class="caption">
<img src="/image/path/image.jpg" width="226" height="282" alt="Alt Text" />
<span style="width:226px;">Caption to accompany image</span>

Any ideas? Thanks again and sorry to be a bore. :slight_smile:

If everything is wrapped in a span with a class of caption, you could try adding this rule:

.caption {display: block;}

So that would leave you with

.caption, .caption img {
  display: block;
  text-align: center;
  margin: 0 auto;

Hope that helps. It’s easier with a live example, so this may need some tweaking, as before, but you can do a lot with CSS even when you can’t touch the HTML. :slight_smile:

PS Don’t hesitate to ask more question. They aren’t boring. :slight_smile:

That worked absolutely perfectly. Thanks so much for your help I really appreciate it. --I may have another in a day or two so if I run into trouble I’ll post again in this thread.

Thanks again.


Fantastic. Whether you post back here or start another thread is fine. :slight_smile:

Hi again ralph.m,

I’ve run into another problem. I’ve discovered a whole new type of page on the site, formatted completely differently within the html and css - well not completely but significantly different. They use tables which are nasty - tables are not used on the other type of pages to handle page structure at all.

The problem is again with centering 3 different items:

  1. The byline and byline dscription, who the article is by, css is: ‘.byl’ and ‘.byd’. Eg. “By Alex Hudson BBC News” though I’d like the “By Alex Hudson” and “BBC News” on 2 lines which I currently have just not centered.

  2. All the images centered horizontally in the middle of the page (some are at the moment, most not) but not mucking up the centering of the other images which I have working already, these being ‘.caption img’ and ‘.byline img’.

  3. The new image caption class ‘.cap’, centering the caption text of the image beneath it.

This may be too much to ask of you, given the help you’ve already given me. But if you want to take a look I’d be enormously appreciative.

4 sample pages are in this zip, you’ll find the css in the html pages, in a style tag, under a section comment called “My additional CSS”.

Thanks and best wishes.


I fixed it with one line of css, though it took me a few hours to suss it out.

table { width: 100%; }

For some reason I can’t edit my post above.