This is probably odd to most people, but for a project I had to put a caption below an image on a webpage. But I wanted the image to be fixed in position and the caption would automatically flow and remain centered no matter how long the string was. I knew the size of the image (original div) but not the text string.

The trick lies in embedding the caption div within another div. Then the outer div should have a left: equal to half the image (or other div)'s width. The relevant CSS is:

outercaption {

	position: relative;

	left: 13px;

	}

.caption {

	text-align: center;

	position: relative;

	left: -50%;

	white-space: nowrap;

	}

Which will work with this HTML code.

Short


		


	

Here is an example. You can even put in your own text to see how it is dynamically sized.