Our website incorporates Twitter, Facebook, and G+ buttons using a responsive design in an ajax portfolio. While the buttons align perfectly with each other, we are facing an issue where we want all three buttons to be centered regardless of the size of the surrounding container.
In theory, this should be achievable by nesting Divs within each other, with the innermost Div containing the buttons floating centrally within a parent Div that spans 100% width. However, despite our attempts, the buttons consistently align to the left side. Below is the current code snippet:
For a live example, visit:
http://themixtapesite.com/#/joe-budden-a-lose-quarter
To better understand the problem, try resizing your browser window on the example page to see how the social buttons stay aligned to the left instead of being centered as desired.
<!-- Social sharing buttons -->
<div class="social-single">
<div class="social-centre">
<div class="twit-button"><a href="https://twitter.com/share" class="twitter-share-button" data-via="mixtapes_4_free" data-lang="msa" data-related="realdannys" data-hashtags="mixtape">Tweet</a></div>
<div class="fb-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php wp_title( '|', true, 'right' ); ?>&send=false&layout=button_count&width=71&show_faces=false&action=like&colorscheme=light&font&height=21&appId=118471234925480" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 71px; height: 21px;" allowTransparency="true"></iframe>
</div>
<div class="gplus-button"><g:plusone href="<?php echo urlencode(get_permalink($post->ID)); ?>" size="medium" annotation="bubble" width="50px"></g:plusone></div>
</div> </div>
Below is the CSS for styling the social buttons:
/* Social Buttons */
.social-single {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 100% !important;
}
.social-centre
{
margin-left: auto;
margin-right: auto;
}
.twit-button {
float: left;
margin: 0;
margin-right: 5px;
width: 80px;
}
.fb-button {
float: left;
margin: 0;
width: 80px;
}
.gplus-button {
float: left;
margin: 0;
width: 50px;
}