Grow your CSS skills. Land your dream job.

[Solved - easy solution] Vertical alignment issue

  • # August 4, 2010 at 2:40 pm

    Yeah, the old how to align something by height problem…

    I have 140px by 140px divs with images fed into them. I need the images to be centered in the div. Horizontal is easy with text-align:center. Height is an issue however. Making them background images isn’t an option.

    With java I could find the height of each image and then apply top and bottom padding based on the results, but that seems too complicated for a simple task and I’d rather it be in just CSS if possible for the sake of degradation.

    Any ideas or links?

    Much appreciated.

    # August 4, 2010 at 7:51 pm

    Solved it. AND learned a new trick. Heres how it goes. Since the Images’ height and width depend on what image is in it. I cant just align it in the center. Text-align:center; sets its horizontally but that doesn’t help with the height.

    Here’s the solution. I set the div to 140px by 140px and position:relative;. I set the image to position:absoute; top:0; right:0; left:0; right:0; margin:auto; and that was that. Automatically centered the image in the div

    :D

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".