CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
300
300

Reputation: 1031

How to align twitter button and normal button horizontally?

I have a twitter button and a normal submit button and I am trying to align them horizontally (in same line).

But even after trying different combinations of margin on ".buttonLine", ".twitter-share-button" and "#newQuoteButton" they are never aligned horizontally.

All I want to do is align them horizontally (in same horizontal line) and then place the in left and right side.

Please suggest how I can do this.

Demo fiddle is at fiddle

Code:

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

function myFunction() {
  //nothing
}
.my-content {
  background-color: light-blue;
  margin: 250px 50px 100px 50px;
  border-radius: 10px;
}
.quote {
  margin: 0px 50px 0px 50px;
  text-align: center;
}
.quoteBy {
  margin: 0px 25px 0px 0px;
  text-align: right;
}
.buttonLine {
  margin: 50px 0px 0px 0px;
}
.twitter-share-button {
  margin: 0px 0px 0px 50px;
}
#newQuoteButton {
  margin: 0px 200px 100px 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>PageTitle</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

</head>

<body>
  <div class="container-fluid">
    <div class="my-content">
      <h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1>
      <h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4>
      <div class="buttonLine" style="clear:both">
        <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large">Tweet</a>
        <button id="newQuoteButton" onclick="myFunction()">New Quote</button>
      </div>
    </div>

    <footer>
      <p class="text-center">Compiled by: Someones Name</p>
    </footer>
  </div>

</body>

</html>

Upvotes: 1

Views: 50

Answers (3)

keithjgrant
keithjgrant

Reputation: 12739

Twitter gives you basically no control over their button, so you need to shift yours to match. You can do this by setting its vertical-align value to a number that lines it up where you need. Try this:

#newQuoteButton {
  vertical-align: 0.5em;
}

Upvotes: 1

e-neko
e-neko

Reputation: 1266

Or try this fiddle:

https://jsfiddle.net/e_neko/uhqv3ye8/4/

#newQuoteButton {

    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

Upvotes: 1

gmustudent
gmustudent

Reputation: 2199

Try this!

  #newQuoteButton {
    position: relative;
    bottom: 10px;
  }

Upvotes: 1

Related Questions