title: vertical align multiple lines of text next to image - all centered
body: <p>Not even sure if this is possible, but thought I would ask.  I have searched and tried numerous 'solutions' with nothing quite what I am looking for.</p>
  
  <p>The container is 940 wide by 100 high.  I want to include an image with multiple lines of text to the right of it.  Both of these as a whole should be centered both horizontally and vertically within the 940x100.  I will not have a width for either the image or text as this will change - especially since I am using it in a slider.</p>
  
  <p>While I can 'mimic' this with a top margin/padding on the inside container I would like to have something definite and not a guess with the margin/padding.</p>
  
  <p>I am using this with flexslider so that is why the format is as below.</p>
  
  <pre><code>    &lt;div id="awards"&gt;
          &lt;div class="flexslider"&gt;
              &lt;ul class="slides"&gt;
                  &lt;li&gt;    
                      img - multiple lines of text
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  #awards .flexslider{
  height:100px;
  text-align:center;
  width:940px;
  margin:0 auto;
  border:1px #dedede solid;
  background:#f1f1f1;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  }
  </code></pre>
  
  <p>EDIT : This acts exactly how I want it to other than the fact it uses a table-based layout :</p>
  
  <pre><code>    &lt;div id="awards"&gt;
          &lt;div class="flexslider"&gt;
              &lt;ul class="slides"&gt;
                  &lt;li&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td style="width:150px"&gt;&lt;img alt="" height="24" src="/images/logo.png" width="150"&gt;&lt;/td&gt;
                              &lt;td&gt;This is a test of the comment section and if I make this larger and larger?&lt;br /&gt;test.com&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;            
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  #awards .flexslider{
  color:#222222;
  height:100px;
  width:940px;
  margin:0 auto;
  border:1px #dedede solid;
  background:#ffffff url('/images/bg_diag.png') repeat;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  }
  
  #awards table{
  width:auto;
  height:100px;
  margin:0 auto;
  }
  
  #awards table img{
  margin-right:30px;
  }
  
  #awards table td{
  height:100px;
  vertical-align:middle;
  }
  </code></pre>