I should probably have done this with a table but...
I have a page that displays a series of 'panels', each divided into two horizontal 'compartments' with text in the left compartment and an image in the right one. I have used the <div> tag to create the containing panel and each of the compartments. What I effectively want to achieve is that both image and text are centred on the same (invisible) horizontal line. So, if the text is higher than the image (or vice versa), the smaller will have white space above and below so that its vertical centre is the same as the other.
Is there a way of doing this keeping the divs and without reverting to a table and without assigning absolute heights to the divs?
I have a page that displays a series of 'panels', each divided into two horizontal 'compartments' with text in the left compartment and an image in the right one. I have used the <div> tag to create the containing panel and each of the compartments. What I effectively want to achieve is that both image and text are centred on the same (invisible) horizontal line. So, if the text is higher than the image (or vice versa), the smaller will have white space above and below so that its vertical centre is the same as the other.
Is there a way of doing this keeping the divs and without reverting to a table and without assigning absolute heights to the divs?