如何將圓形化身垂直居中到行中的其他元素？

Question

在此頁面上，我想將四舍五入的化身垂直居中到行中的其他元素（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>

在此先感謝您，如果需要可以讓我更容易理解這個問題，請告訴我。

Answer 1

嘗試：

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

為了使整個塊居中，您可以在父div上添加padding-top:15px使其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>

考慮到以上幾點，您應該強烈考慮刪除內聯樣式並將其放入樣式表中。

Answer 2

將vertical-align:middle添加到以下類：

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