How can I make sure 2 row elements are perfectly aligned?

Question

I'm new to front-end development and am trying to get facebook share and twitter tweet buttons in the same line just below an image but am unable to do it.

 <figure><img src=" " alt=""></figure> <div class="row"> <a class="twitter-share-button" href="https://twitter.com/share" data-url=" ">Tweet</a> <div class="fb-share-button" data-href="" data-layout="button" data-mobile-iframe="true"> <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&amp;src=sdkpreparse"> Share</a> </div> </div> 

No matter what I do I can't get them under the image, aligned on the right side. This is what I'm getting: enter image description here

Answer 1

There are many many ways to do it

One way is display: inline-block and vertical-align: middle Another modern way is use display flex for the parent element and align-self: center for the child elements

just resize your browser to see the result

<figure><img src=" " alt=""></figure>
<div class="row">
<a class="twitter-share-button"
 href="https://twitter.com/share"
 data-url=" ">Tweet</a>
<div class="fb-share-button" data-href=""
 data-layout="button"
 data-mobile-iframe="true">
 THERE IS A LOT OF TEXT HERE
<a class="fb-xfbml-parse-ignore" target="_blank" 
 href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&amp;src=sdkpreparse">
 Share</a>
</div>
</div>

.row {
  display: flex;
}

.fb-share-button, .twitter-share-button {
  align-self: center;
}

https://jsfiddle.net/mpna771s/3/ for the flex way;

Answer 2

You could also float the elements

        <div class="row">
        <div class="smedia">
            <div class="twitter">
                <a class="twitter-share-button"  href="https://twitter.com/share"  data-url=" ">Tweet</a>
            </div>

            <div class="fb">
            <div class="fb-share-button" data-href="" data-layout="button"   data-mobile-iframe="true">
                 THERE IS A LOT OF TEXT HERE
                <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&amp;src=sdkpreparse">Share</a>
            </div>
            </div>
        </div>
        </div>

CSS

        <style type="text/css">
          .smedia{width:100px;margion:0 auto}
          .twitter, .fb{float:left;margin:10px;}
        </style>