Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

right-centered image numbers

1:30 am on Jun 7, 2013 (gmt 0)

New User

10+ Year Member

joined:Dec 24, 2006
posts: 8
votes: 0

I have pages that use tables to center an image and then put a number ( "(1)", "(2)", ...) at the right margin, vertically centered with the image. Think math equations. I would like to do away with the tables and use css.

I actually convert these pages from other data with a script and the image comes before the number in the data, so preserving order would be nice. If I switch the two, then I can right-float the number and get something close, but no vertical centering.
1:32 am on June 7, 2013 (gmt 0)

New User

10+ Year Member

joined:Dec 24, 2006
posts: 8
votes: 0

ps...The css can't know the size of the image ahead of time, although it can know the font size of the number.
3:39 am on June 7, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 443

One way: Put image plus number in paired groups.

<div class = "holder">
<div class = "picture">
{picture here}
<div class = "number">
{number here}

If you set the "holder" div to "display: inline-block" you can march them across the page, each one taking only as much space as it needs. The image doesn't absolutely have to be inside of something; it's just tidier if you can keep it structurally parallel to its caption. Or number, or whatever it is.

If you set the "picture" and "number" divs (both of them) to "display: table-cell" you get them side by side and you can set the number part to "vertical-align: middle".

display: table-cell is not used all that often-- except of course for actual table cells, where it is the default-- but it's essential in one situation. A table cell is the only block-level element that allows vertical alignment. That's alignment within itself, not in relation to other nearby elements (like superscripted text). Note that table cells don't have margins; you'll need padding instead.

Matter of fact, you can probably run your existing html through a quick global replace using a Regular Expression and convert them all to divs.

If you want a sneak preview, don't even change the html. Just redefine the existing elements in css:

table.mypictures {display: inline-block;}

and so on.

There is a time and a place for floats. This isn't one of them ;)

And, if you later change your mind and decide you want the number to go below the picture instead of to the side, simply change the display properties for picture and caption to "block". (Or, in the case of a div, don't say anything at all; block is the default.)

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members