将嵌入的推特关注按钮放置在页面右侧答案

【问题标题】：Position the embedded twitter follow button to the right of the page将嵌入的推特关注按钮放置在页面右侧
【发布时间】：2017-07-28 13:24:38
【问题描述】：

所以我是 html 新手，不像刚开始那样，但绝对不是高级：假设你已经阅读了标题，这是我的 html 代码

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"));

.socialButton {
  visibility: hidden;
}

.tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

center {
  left: 220px;
}

.vertical-menu {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 10px;
  left: 10px;
  margin-bottom: 30px;
  z-index: 1;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  pading: 12px;
  text-decoration: none;
  z-index: 2;
}

.vertical-menu a:hover {
  background-color: #ccc;
  z-index: 2;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
  z-index: 2;
}

html {
  height: 100%;
  text-indent: 2.0em;
  position: relative;
  left: 220px;
  margin-right: 220px;
  text-indent: 2.0em;
}

a {
  color: blue;
  text-shadow: 0px 0px black;
  text-decoration: none;
}

body {
  background-color: #72b368;
  color: white;
  text-shadow: 2px 2px black;
  font-size: 18;
  text-indent: 2.0em;
  height: 100%;
  margin: 0;
}

head {
  background-color: #72b368;
  color: orange;
  text-shadow: 2px 2px black;
  font-size: 18;
}

footer {
  background-color: black;
  color: darkred;
  font-size: 12;
  height: 20;
  text-indent: 0em;
  margin: 0;
  position: relative;
  left: -220px;
  right: 220px;
  margin-right: -220px;
  text-align: right;
  padding-right: 10px;
  padding-top: 4px;
}

h1 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 22;
}

h2 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 26;
}

h3 {
  color: orange;
  text-shadow: 2px 2px black;
  font-size: 26;
}

h4 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 30;
}

h5 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 34;
}

h6 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 38;
}

<center>
  <!--Header Title-->
  <h3>Insert Meaningless Contact Here</h3>
</center>
<b></b>
<p>Welcome to a meaningless contact page, with meaningless contacts on it, where you can contact the meaningless creature known as me.</p>
<!--Yes this is a joke-->
<div class="vertical-menu">
  <!--Side menu-->
  <a href="Page.html">Home</a>
  <a href="#" class="active">Contact Me</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
</div>
<div class="pusher">
  <!--Actual <body> content-->
  <hr></hr>
  <a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a>
  <br></br>
  <center>
    <a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-width="750" data-height="400">Tweets by TwitterDev</a>
  </center>
  <center>
    <!--More Content-->
    <h2>More content coming soon.</h2>
    <h1>(Always trying to add more stuff.)</h1>
  </center>
  <null>
    <!--Page breaks for footer-->
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
  </null>
</div>
<footer>
  <!--Copyright and other shit-->
  Site design by Matthew Rease. (c) 2017. Do not copy custom design without permission. To contact me, go to my YouTube channel listed above, and use the contact information there.
</footer>

抱歉这么长，我只是想展示一下以防万一。我做了一些研究，但一半时间我不明白其他人在说什么，另一半（当我这样做时）他们的解决方案不起作用。我无法再用文字来解释我的结果，但这是我“photoshopped”的一个例子 http://imgur.com/a/EqD8X 显然它不一定在同一个地方，但我只是举个例子。

在您指出 .socialButton 只是使其不可见（尽管即使这样也不起作用）之前，这是一个测试，基本上我无法在 .socialbutton {} 块内运行任何东西，我'我尝试了一些显而易见的事情，比如正确：align-text: align-content: 以及什么，但显然问题是让类应用特征它应该使用类的 twitter-follow-button，然后是我制作的名为 socialButton。

有什么想法吗？建议？感谢所有帮助。

【问题讨论】：

标签： html css twitter formatting

【解决方案1】：

试试下面的代码。您可以添加带有分割的锚标记，然后将其对齐。

<div align = "right"><a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a><div>

【讨论】：

谢谢，成功了。所以基本上把任何格式放在
?
是的，你是对的。如果要添加对齐，最好在一个部门内进行。