0

I had this question answered here: Left-align image and centered text on same level inside of a div?

I encountered an issue with this solution, however. The title has a series of font families defined. When one of the font families is not present on a user's computer, so a different font is shown, the static positioning of the image to its left becomes incorrect.

Is there a way to detect this occurring and add static positions for each font family? Or, even better, a way to just automatically keep the image in the right spot regardless of fon't size/family?

Thanks

Fiddle: http://jsfiddle.net/linmic/5L5V9/

It inherits font-family from master page code.

Community
  • 1
  • 1
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • Really don't think there's any way the presence or absence of a font on a users' computer would affect the positioning of another element. 99% likelihood something else is amiss. Link to your page or a jsfiddle. Could it be that you're discussing static positioning, which is actually the opposite of the absolute positioning that was prescribed for the image in that older question you linked? – RwwL Jun 03 '11 at 19:20
  • Oh, I apologize. I did not realize static was a keyword in css. I am indeed using absolute positioning, the fiddle is the same as in the last post. I can edit it in here. The size of the font is controlling how big the colored area is -- larger fonts cause the overall colored area to increase which causes the image to be viewed as off-center. – Sean Anderson Jun 03 '11 at 19:31
  • Oh, now I see what you mean. Well, it's off center (assuming you mean vertically) when the box size changes because you didn't position it from the center :) If you want it to always stay centered, position it as top: 50%, margin-top: -[half the image height]px; – RwwL Jun 03 '11 at 19:42

3 Answers3

1

Here's an illustration of what I think you want, using top: 50%; image size of 48px, and top margin of -24px to keep it vertically centered:

http://jsfiddle.net/5L5V9/5/

RwwL
  • 3,298
  • 1
  • 23
  • 24
  • Is there a way to make the "top: 50%" start inside of the div? This place the image in the middle of my page + (1/2 height), unless I am doing something incorrect. – Sean Anderson Jun 03 '11 at 19:51
  • set relative on the object you want the the absolute element to be positioned based on: http://stackoverflow.com/questions/6145903/position-overlay-div/6146021#6146021 – m4tt1mus Jun 03 '11 at 20:03
  • Yeah, the original fiddle example posted in the question just had "relative" misspelled "rela1tive". – RwwL Jun 03 '11 at 21:43
0

The best way to ensure you get the font you want & the proper positioning of your image & title is to choose a font that is (legally) able to be used by @font-face.

For instructions & lots of @font-face fonts have a look at Font Squirrel

joshmax
  • 378
  • 5
  • 20
0

personally i like to use css background image for centering images next to text. here is an example: http://jsfiddle.net/mattimus/ZsmCG/

the downfall of this method is that you can't make the image clickable.

m4tt1mus
  • 1,642
  • 14
  • 24