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>
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.
This is the image that im trying to center, ive tryed different ways to do this but to no success i think its to do with bootstrap pre determining the position and if so i dont know how to disable it can anyone help me with this issue many thanks.
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
<br> </br>
<!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200" </br> -->
<!-- <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
margin-right: auto;" align="center" /> -->
<center> <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>
<br> </br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-12 well text-center">
<h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
<p>
If you have forgot your password and would like to reset it please contact Jack </p>
<input type="button"
value="Request New Password"
onclick="location='../forgot_password/forgot.php'" />
</div>
</div>
</div>
It looks like that the row is just positioning the image wrongly.. <center><img></center> should work fine.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Source
The img-responsive isn't doing anything to fix it left. Content flows left to right normally, so it's positioned normally. You can center it by adding text-align: center; on its parent element or by adding some rules directly to the image. This is better done on a class, but here's an example:
img {
display: block;
margin: 0 auto;
}
http://codepen.io/paulcredmond/pen/RGOKwr
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<body>
<iframe src="http://flightaware.com/resources/airport/SAN/APD/AIRPORT+DIAGRAM/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/DP/all/pdf" width="600" height="700">
</body>
<p>Approach</p>
<body>
<iframe src="https://flightaware.com/resources/airport/KSAN/STAR/all/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/IAP/all/pdf" width="750" height="800">
</body>
</div>
</div>
</div>
</section>
That is what I have at the moment, but it only shows one pdf, the top one. How can I get it to show all the pdfs?
Thanks
First of all, you forgot to close your iframe tags.
The iframe tag is not self closing and should be explicitly closed like the following:
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
(Notice the </iframe> closing tag)
This one worked for me (your original HTML re-worked):
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
</div>
<p>Approach</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="750" height="800"></iframe>
</div>
</div>
</div>
</div>
</section>
See it here: https://jsfiddle.net/c55zztbn
If you are still not getting your iframe's src URL's shown, the url you are using might be using a "X-Frame-Options" response header which will prevent the iframe from loading it.
Hope that it helps a bit!
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>
how can I align the text with the twitter button?
This is how I want it to be aligned:
This is the code:
<div class="pull-right">
<p>text <b>text</b> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1357735024.html#_=1358118140271&id=twitter-widget-0&lang=it&screen_name=test&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 214px; height: 20px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
</div>
The vertical-align CSS property appears to be what your looking for.
Here's a working example of your code I made.