Sun, 2010-08-29 10:02
Hello,
is there a way to add options (align=absmiddle exactly) for an image defined by content attribute? Code looks like:
#object:before {content:url('image.png');}
The thing I'm trying to do is to create page menu, with rounded images before and after it when hovered.
Thanks.
Sun, 2010-08-29 12:33
#1
Not tested.
I've never actually used content to put an image onscreen, so I'm not sure if it becomes an actual HTML image or a background. But assuming it's a foreground image:
#element:before {
content: url(theimage.png);
display: block;
width: whatever;
margin: 0 auto;
}
To use "align" in these Modern Days means "text-align" which must go on the block-level parent parent, and cannot go on the inline-level element (like img) itself. So making the image a block and centering it with automargins is your option to center it.
Are you going to be swapping these images around as the user interacts with the button?