CODEWITHSUNDEEP
javascripthtmlcss
user2398188
user2398188

Reputation: 1477

inline CSS to align a social share icon

I'm using social share buttons on my site from ShareThis. I'm having some alignment issues with the Facebook Like button. See screenshot.

enter image description here

I'd like some direction on the syntax for incline CSS to help align or pad the Facebook line button so it aligns vertically with the others. I tried many different combinations of doing this including adding style="padding-bottom:25px"

This is the HTML code provided by ShareThis:

<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_fblike_large' displayText='Facebook Like'></span>
<span class='st_plusone_large' displayText='Google +1'></span>

Added these lines to bottom of file

<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-22cc647b-2be-2114-fe32-8c2f8b9ab95e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Upvotes: 0

Views: 1112

Answers (3)

Pete
Pete

Reputation: 58422

As the max-height of all your spans are 32px at the most you should add this to your stylesheet

span {display:inline-block; height:32px; line-height:32px;}

Example

Please note it would probably be best to give all your spans a class and then style that rather than styling the span tag as above

Upvotes: 2

Akki619
Akki619

Reputation: 2432

See fiddle for below code. you just needd to replace text with your images.

<div style="float:left;">  

<span style="display:inline;"></span>                               
<span style="display:inline; "></span>                                    

</div>

See js fiddle here

Upvotes: 0

Mihai Alex
Mihai Alex

Reputation: 678

Put code below on fb span:

style="display: inline-block; height: 32px; line-height: 32px; vertical-align: top;"

Upvotes: 0

Related Questions