How to align text and images in the middle

Question

I added a bar on the top of my website, and I want to align the images and text to the middle.

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?

<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;
        "> 

             <p style="text-align: center;color: black;margin: 0.7em;"> <span style="font-family: &quot;ArialRMB&quot;; " arialrmb";"="">exampleExample</span> will be at <img src="http://ourgang62.com/images/photo_gallery.jpg" style="
                vertical-align: middle;
                width: 9em;
            "> 2015 in San Francisco, August 11th - 13th <a href="mailto:[email protected]" id="casual-analytics"><img src="http://ourgang62.com/images/photo_gallery.jpg" style="
                width: 9em;
                margin-left: 2em;
                vertical-align: text-bottom;
              "></a> 

                <span id="casualx" style="
                            float: right;
                            cursor: pointer;
                        "> X </span>

              </p> 

        </div>

http://jsfiddle.net/4468ekjy/2/

Answer 1

I never knew I can do this - I used verticaly-align:-7px; and this works :o !

Answer 2

set image position to relative since it will be relative to your div