title: How to align text and images in the middle
body: <p>I added a bar on the top of my website, and I want to align the images and text to the middle.</p>
  
  <p>How can I do that? This is what I tried so far, and it seems like I'm doing something wrong. What the best proper way? </p>
  
  <pre><code>&lt;div class="casual" style="
              width: 100%;
              background-color: rgba(255, 255, 255, 0.72);
              display: block;
              z-index: 1000;
              border-bottom: 3px solid rgb(191, 191, 191);
              position: fixed;
              font-size: 15px;
          "&gt; 
  
               &lt;p style="text-align: center;color: black;margin: 0.7em;"&gt; &lt;span style="font-family: &amp;quot;ArialRMB&amp;quot;; " arialrmb";"=""&gt;exampleExample&lt;/span&gt; will be at &lt;img src="http://ourgang62.com/images/photo_gallery.jpg" style="
                  vertical-align: middle;
                  width: 9em;
              "&gt; 2015 in San Francisco, August 11th - 13th &lt;a href="mailto:banana@example.com" id="casual-analytics"&gt;&lt;img src="http://ourgang62.com/images/photo_gallery.jpg" style="
                  width: 9em;
                  margin-left: 2em;
                  vertical-align: text-bottom;
                "&gt;&lt;/a&gt; 
  
                  &lt;span id="casualx" style="
                              float: right;
                              cursor: pointer;
                          "&gt; X &lt;/span&gt;
  
                &lt;/p&gt; 
  
          &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4468ekjy/2/" rel="nofollow">http://jsfiddle.net/4468ekjy/2/</a></p>