CODEWITHSUNDEEP
cssgoogle-plusvertical-alignment
Gabriel Petrovay
Gabriel Petrovay

Reputation: 21864

How to align Google+ share button horizontally with the other (Facebook Like and Twitter buttons)

The generated Google+ share button is given the following element style:

font-size: 1px;
vertical-align: baseline;

Placing the button with such a style in the same line with the other social buttons, will make the Google+ button display vertically displaced towards the bottom. (because the font of that element is 1px high):

enter image description here

Hoe can I wrap the buttons to cancel the vertical-align-ment of the Google+ button. If in DevTools I change it to top the buttons are properly aligned. (Or if I remove the font-size property)

Or any other solution (except using !important and the dynamically generated ID of the generated div)

Upvotes: 0

Views: 1004

Answers (2)

Ahmed All Razi
Ahmed All Razi

Reputation: 73

Use this if you want to solve this problem using TABLE tag

<table class="table" style="margin-bottom: 0px;">
  <tr>
    <td> 
      [Facebook Share Button Code]
    </td>
    <td>
      [Google+ Share Button Code]
    </td>
    <td>
      [Twitter Tweet Link Code]
    </td>
  </tr>
</table>

Upvotes: 0

dEsta88
dEsta88

Reputation: 119

You can try this css code :

iframe {
   display: inline-block !important;
   vertical-align: bottom !important;
}

Why iframe? because, they load using iframe to show the button in your page. You can check example on my blog page

Upvotes: 2

Related Questions