How do I vertically center the rounded avatar to other elements in the row?

2 comments

1. Try:

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

   In order to then centre the whole block- you may then way to add padding-top:15px on the parent div to even it up

   Full code:

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

   With the above in mind- you should strongly consider removing your inline styles and putting them in your stylesheet.

   Log in to Reply

2. Add vertical-align:middle to the following class:

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

   Log in to Reply