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>
Related
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.
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 have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
I want to display several images next to each other and each image has a date below it. The date is wider than the image and I would like to center the image on top of the date. Here's a code snippet
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/17/11 03:29pm)
</div>
</div>
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/22/11 02:16pm)
</div>
</div>
If I'm understanding you right, you should just be able to use text-align: center:
http://jsfiddle.net/rahjU/
To shift your image Before other content (visually)
.img {
order: -1;
}
W3