CODEWITHSUNDEEP
htmlcss
Jaf-2017
Jaf-2017

Reputation: 89

How to align html elements on the same row

If you see the attachment below, three share buttons are not equally margined from the top. Tweet button didn't maintain the consistency, it is little bit up than the other two. How do I make all of them equally distanced from the top?

enter image description here

The code I am working on:

                            <h2 class="title">Share this blog</h2>

                            <div class="fb-share-button" data-href="http://alfa-blog.com/"
                                 data-layout="button_count" data-size="large" data-mobile-iframe="true">
                                <a class="fb-xfbml-parse-ignore" target="_blank" 
                                   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Falfa-blog.com%2Findex.html&amp;src=sdkpreparse">Share</a>
                            </div>

                            <a href="https://twitter.com/share" 
                               data-size="large"
                               class="twitter-share-button" data-show-count="false">Tweet</a>

                            <div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>

Upvotes: 0

Views: 12466

Answers (5)

JPA
JPA

Reputation: 523

Put the respective button codes inside a div element which functions as a mask. Like so:

<h2 class="title">Share this blog</h2>

<div class="socialbtn socialbtn-facebook">
  <div class="fb-share-button" data-href="http://alfa-blog.com/" data-layout="button_count" data-size="large" data-mobile-iframe="true">
    <a class="fb-xfbml-parse-ignore" target="_blank" href="[address]">Share</a>
  </div>
</div>

<div class="socialbtn socialbtn-twitter">
  <a href="https://twitter.com/share" data-size="large" class="twitter-share-button" data-show-count="false">Tweet</a>
</div>

<div class="socialbtn socialbtn-googlePlus">
  <div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>
</div>

with the CSS code:

.socialbtn {display:inline-flex;height:25px;width:auto;overflow-y:hidden}
.socialbtn-googlePlus {margin-top:-10px}
.socialbtn-twitter {margin-top:0px}
.socialbtn-facebook {margin-top:-5px}

Please correct the respective margins to rectify your situation.

Upvotes: 0

Rohit Sharma
Rohit Sharma

Reputation: 3334

It may work for you..

.social-holder {width: 100%;}
.social-holder * {display: inline-block; vertical-align: top; padding: 0px; margin: 0px;}
<h2 class="title">Share this blog</h2>
<div class="social-holder">
<div class="fb-share-button" data-href="http://alfa-blog.com/"
data-layout="button_count" data-size="large" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" 
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Falfa-blog.com%2Findex.html&amp;src=sdkpreparse">Share</a>
</div>

<a href="https://twitter.com/share" 
data-size="large"
class="twitter-share-button" data-show-count="false">Tweet</a>

<div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>

</div>

Upvotes: 0

Tik
Tik

Reputation: 882

using flex-box it can be done like this

<div class="container">
   <div class="fb-share-button" data-href="http://alfa-blog.com/"
      data-layout="button_count" data-size="large" data-mobile-iframe="true">
      <a class="fb-xfbml-parse-ignore" target="_blank" 
         href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Falfa-blog.com%2Findex.html&amp;src=sdkpreparse">Share</a>
   </div>
   <a href="https://twitter.com/share" 
      data-size="large"
      class="twitter-share-button" data-show-count="false">Tweet</a>
   <div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>
</div>

CSS

.container{
    display: flex;
    flex-direction: row;
    align-items: flex-start
    }

this is a really good guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 6

krolovolk
krolovolk

Reputation: 472

You can use

float:left; and individual margin and padding in css for each socio div

or absolute position for these elements

Upvotes: 0

Horai Nuri
Horai Nuri

Reputation: 5578

Since your css is missing I will assume that you use display:inline-block;, you probably forgot to include :

.your_icons {
    vertical-align:top;
}

Upvotes: 0

Related Questions