Question

所以我是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>

很抱歉，这只是为了以防万一，我只是想展示一切。我做了一些研究，但有一半时间我不明白别人在说什么，而另一半（当我这样做）他们的解决方案不起作用。我不能再用言语来解释我的结果了，但是这里有一个例子我为了一个例子而“喋喋不休” http://imgur.com/a/EqD8X 显然它不一定会在同一个地方，但我只是举个例子。

之前你指出.socialButton只是让它不可见（虽然即使这样也行不通）它是一个测试，基本上我无法在.socialbutton {}块里面运行任何东西，我'尝试了正确的显而易见的事情：align-text：align-content：and what-not但很明显问题是让类应用这些特性它应该使用class的twitter-follow-button，然后我使用的名为socialButton。

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

Answer 1

尝试以下代码。您可以使用除法添加锚标记，然后将其对齐。

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

将嵌入式Twitter关注按钮放在页面右侧

1 个答案: