将按钮上方的图片居中到其他网页

Question

我想将徽标放在按钮上方，以将js引到另一个页面。我可以正常工作，但无法在按钮上方获得图像。 https://jsfiddle.net/0bzagL6x/2/我对html和CSS不太满意。这是我的第一个项目。

      <a class="btn" onclick="WebsiteRedirectForum()">
      <img class="forum" src="img/forum.png" />
        Forum
      </a>

非常感谢！

汤姆

Answer 1

在这种情况下，假设您希望每个块中的图像都显示在“论坛”文本上方，那么我建议使用换行符（<br>）

例如：

      <a class="btn" onclick="WebsiteRedirectForum()">
          <img class="forum" src="img/forum.png" /><br>
        Forum
      </a>

我希望这会有所帮助。如果这不能回答您的问题，请发表评论。

Answer 2

有许多方法可以使用HTML和CSS来实现此按钮布局。

首先要做的是更新HTML标记，并在按钮文本周围添加一个<span>标签-在这种情况下，是“论坛”一词。这将使我们能够选择CSS中的文本。

Heres a codepen with two solutions

第一个是使用display: block和text-align: center的简单解决方案。 第二种使用flexbox，并且稍微复杂一些（并且可能会过大）。

如果您刚开始，我建议Code Academy是开始学习HTML和CSS的好地方。