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?
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&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>
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&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/
Since your css is missing I will assume that you use display:inline-block;, you probably forgot to include :
.your_icons {
vertical-align:top;
}
You can use
float:left; and individual margin and padding in css for each socio div
or absolute position for these elements
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&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>
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">
Tweet
</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.
Related
Is there a way to align these elements in the same line. Right now it is one below the other
<h5>Title</h5><a id="downloadData" class="shiny-download-link" href="" target="_blank" download><h5>Download</h5></a>
Try with float property
https://www.w3schools.com/cssref/pr_class_float.asp
<div>
<h5 style="float: left;">Title</h5>
<a style="float: left;" id="downloadData" class="shiny-download-link" href="" target="_blank" download><h5>Download</h5></a>
</div>
Only use floats if your site is stuck in the year 2000, nowadays you use flexbox for that:
.wrap {
display: flex;
gap: 20px;
}
<div class="wrap">
<h5>Title</h5>
<a id="downloadData" class="shiny-download-link" href="" target="_blank" download>
<h5>Download</h5>
</a>
</div>
I have an outer div which is a flex box. Inside it, there will be three elements as inline-block: two advertisements on the left and right, and the content in between. I want the advertisements to be aligned to the left and right and then work on my content in the middle as if the ads were the margins of the page (I hope this is clear). I'm having to use a lot of spaces but is there a way to directly place the two ads on either sides of the flex box? I tried using position:right and float:right; properties but these didn't work.
Here's my code:
<!---==OUTER DIV==-->
<div id="content-flex" style="display:flex;">
<!--====LEFT SIDE AD====-->
<div style="display:inline-block; position:left;">
<span style="color:white;">Advertisement</span><br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a><br/>
</div>
<!--HERE I HAVE TO USE A LOT OF -->
<!--====MIDDLE : CONTEN====T-->
<div style="display:inline-block;">
<p>Loreum Ipsum...</p>
</div>
<!--HERE I HAVE TO USE A LOT OF -->
<!--====RIGHT SIDE AD====-->
<div style="display:inline-block; position:right;">
<span style="color:white;">Advertisement</span><br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
</div>
This is how the page looks right now:
If you just set flex: 1 on middle div it will take all the free space and push right ad to right side. Also once you set display: flex on parent element float property won't work on child elements.
#content-flex > div:nth-child(2) {
flex: 1;
}
<div id="content-flex" style="display:flex;">
<div>
<span style="color:white;">Advertisement</span>
<br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
<br/>
</div>
<div>
<p>Loreum Ipsum...</p>
</div>
<div >
<span style="color:white;">Advertisement</span>
<br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
</div>
Add the following style to your outer div.
justify-content: space-between;
or
justify-content: space-around;
Look here for more alignment options for flex.
This is how it can be managed using the flex box model:
#content-flex,
#AdLft,
#AdRgt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.Middle{
width:100%;
}
<div id="content-flex">
<div id="AdLft">
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
<div class="Middle">
<p>Loreum Ipsum...</p>
</div>
<div id="AdRgt">
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
</div>
I'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out.
Thank you
<header data-spy="affix" id="myHeader" class="container row">
<div class="col-sm-4 ">
<div class="centralize">
<a href="http://www.facebook.com" target="_blank">
<img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.twitter.com" target="_blank">
<img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.instagram.com" target="_blank">
<img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
</header>
Actually with {margin:0 auto; width:50%} it should work.
But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%
To center align the content within the class="centralize" divs, use:
.centralize {
text-align: center;
}
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&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
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&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;
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&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>
I have this page:
http://www.comehike.com/hiking.php
<div style="align:center">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="false" action="recommend" font=""></fb:like>
</div>
And I am using this code to try to center-align the Facebook share button, but it isn't happening.
Any idea how I can center-align it?
Try this:
<div style="margin: 0 auto; width: 390px;">
Old post but this worked for me:
<div style='text-align: center;' class="fb-like"
data-href="https://www.facebook.com/georgerrmartinofficial"
data-layout="standard"
data-action="like"
data-show-faces="true"
data-share="true"></div>