homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

right-centered image numbers

 1:30 am on Jun 7, 2013 (gmt 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 Jun 7, 2013 (gmt 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 Jun 7, 2013 (gmt 0)

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.)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved