html - 如何在中间对齐文本和图像

Question

我在我的网站顶部添加了一个栏，我想将图像和文本对齐到中间。

我该怎么做？到目前为止，这是我尝试过的，似乎我做错了什么。最好的正确方法是什么？

<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:banana@example.com" 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

将图像位置设置为相对位置，因为它将相对于您的 div