CSS / HTML vertical centering
October 17, 2005 11:07 AM Subscribe
I'm trying to figure out how to do some vertical centering in two different scenarios. I'm looking for CSS solutions, but plain HTML fixes are welcomed as well -- for either/or.
1) Centering text vertically inside a line: that is, if a line of text has multiple font sizes, the small text won't sit at the baseline, rather, it will be centered inside the space defined by the largest font.
2) Centering a paragraph(s) vertically beside a floated image: If you float an image right or left, but the text you're wrapping around it doesn't stretch the vertical span of the image, it sits at the top with extra space below. I'd like to have this automatically center itself with the picture, regardless of the picture size. Maybe making a div that is 100% of the picture height, and encompassing the text and the image inside? How would this, or other solutions, be done?
1) Centering text vertically inside a line: that is, if a line of text has multiple font sizes, the small text won't sit at the baseline, rather, it will be centered inside the space defined by the largest font.
2) Centering a paragraph(s) vertically beside a floated image: If you float an image right or left, but the text you're wrapping around it doesn't stretch the vertical span of the image, it sits at the top with extra space below. I'd like to have this automatically center itself with the picture, regardless of the picture size. Maybe making a div that is 100% of the picture height, and encompassing the text and the image inside? How would this, or other solutions, be done?
In HTML, positioning things vertically in relation to other things is generally referred to as "alignment." Try googling html vertical alignment.
posted by CaptApollo at 12:18 PM on October 17, 2005
posted by CaptApollo at 12:18 PM on October 17, 2005
« Older Amazon's recommendations just don't cut it these... | Experiences with City CarShare? Newer »
This thread is closed to new comments.
- Vertical centering using CSS
- Vertical centering in CSS
- Victoria's vertical centering
- Single-line vertical centering
Some of the examples are for centering a DIV vertically on a page, but could probably be adapted to center text or images inside a DIV.posted by kirkaracha at 11:52 AM on October 17, 2005