Vertical align an image and a multiline text

Question

I´m trying to align an image and a text vertically:

+-------------------------+ -- Viewport
|         Text text text  | 
| +-----+ text text text  | 
| |IMAGE| te         


        

Answer 1

You said you can't use margin/padding answers because of not knowing size. However, why not just use percentage to put the image halfway down, then split everything up into divs?

    

        
    
    

        Whatever
    

And then in your CSS, do this:

#viewport {
  width:800px;
  height:500px;
  border:1px solid #FFF;
}     

#image {
  width: 400px;
  float:left;
  height:100%;
  text-align: center;
}

img {
  margin-top:50%;
}

#text {
  width:300px;
  float:left;
}

Obviously all the widths and heights can be percentages or however you wish to handle them. However, this should render how you want it to. Hope I am understanding your question correctly.