Html 如何将圆形化身垂直居中于行中的其他元素？

我想将我的圆形头像垂直居中于行中的其他元素（fb/twitter按钮）。下面是该行的一段代码：

<div style="color:#333;background-color:#fff;background-image: url();padding-bottom: 15px;border-bottom: 1px dotted #ddd;border-top: 1px dotted #ddd;margin-bottom: 20px;">
    <div class="entry-meta"> 
        <span class="vcard author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"> 
            <a href="http://crazzzytravel.com/author/illia-and-nastia/" class="circle"><img height="32" width="32" src="http://twitter.com/api/users/profile_image?screen_name=crazzzytravel" alt="Crazzzy Travel"></a> 
            <a href="http://crazzzytravel.com/author/illia-and-nastia/" class="url fn n" rel="author" itemprop="url"><span itemprop="name">Illia and Nastia</span></a>
            <iframe id="twitter-widget-3" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1404859412.html#_=1406708138374&amp;id=twitter-widget-3&amp;lang=en&amp;screen_name=crazzzytravel&amp;show_count=false&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 141px; height: 20px;"></iframe>
            <script>
                ! function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0],
                        p = /^http:/.test(d.location) ? 'http' : 'https';
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = p + '://platform.twitter.com/widgets.js';
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, 'script', 'twitter-wjs');
            </script>
        </span>
        <iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fcrazzzytravel&amp;width=&amp;height=80&amp;colorscheme=light&amp;layout=standard&amp;show_faces=true&amp;appId=629938040435478" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height: 20px;" allowtransparency="true"></iframe>
    </div>
</div>

! 功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]，
p=/^http:/.test（d.location）？'http'：'https'；
如果（！d.getElementById（id））{
js=d.createElement；
js.id=id；
js.src=p+'：//platform.twitter.com/widgets.js'；
fjs.parentNode.insertBefore（js，fjs）；
}
}（文档“脚本”、“twitter wjs”）；

提前感谢您，如果需要，请告知我是否可以使此问题更容易理解。

尝试：

span.vcard.author > a{
   vertical-align:middle
}

为了使整个块居中，您可以在父

div

上添加

padding top:15px

，使其均匀

完整代码：

<div style="color:#333;background-color:#fff;background-image: url();padding-top:15px;padding-bottom: 15px;border-bottom: 1px dotted #ddd;border-top: 1px dotted #ddd;margin-bottom: 20px;">
    <div class="entry-meta"> <span class="vcard author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"> <a style="vertical-align:middle;" href="http://crazzzytravel.com/author/illia-and-nastia/" class="circle"><img height="32" width="32" src="http://twitter.com/api/users/profile_image?screen_name=crazzzytravel" alt="Crazzzy Travel"></a> <a style="vertical-align:middle;" href="http://crazzzytravel.com/author/illia-and-nastia/" class="url fn n" rel="author" itemprop="url"><span itemprop="name">Illia and Nastia</span>
        </a>
        <iframe id="twitter-widget-3" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1404859412.html#_=1406708138374&amp;id=twitter-widget-3&amp;lang=en&amp;screen_name=crazzzytravel&amp;show_count=false&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 141px; height: 20px;"></iframe>
        <script>
            ! function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + '://platform.twitter.com/widgets.js';
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, 'script', 'twitter-wjs');
        </script>
        </span>
        <iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fcrazzzytravel&amp;width=&amp;height=80&amp;colorscheme=light&amp;layout=standard&amp;show_faces=true&amp;appId=629938040435478" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height: 20px;" allowtransparency="true"></iframe>
    </div>
</div>

! 功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]，
p=/^http:/.test（d.location）？'http'：'https'；
如果（！d.getElementById（id））{
js=d.createElement；
js.id=id；
js.src=p+'：//platform.twitter.com/widgets.js'；
fjs.parentNode.insertBefore（js，fjs）；
}
}（文档“脚本”、“twitter wjs”）；

---

上面的想法-你应该强烈考虑删除你的内联样式并把它们放在你的样式表中。

< P>添加代码>垂直对齐：中间< /代码>到下面的类：

.circle img {
    border-radius: 50%;
    vertical-align: middle;
}

---

请编辑你的代码，它无法在一个文件中读取line@singe31，是的，这就是我写的意思（我不知道如何插入格式化代码，使它看起来很好，抱歉），我是一个新手，不知道如何使它多行。在记事本中使它多行并重新粘贴，这很容易谢谢，这很有效。是的，我知道风格，我的错，我会的。