Question

On this page我想将圆形化身垂直居中到行中的其他元素（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
}

然后，为了使整个区块居中 - 您可以在父padding-top:15px上添加div以使其均匀

完整代码：

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

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

2 个答案: