时间戳

首页 > 解决方案 > 给定文本未正确显示在按钮上

javascript - 给定文本未正确显示在按钮上

问题描述

我的问题是“如何将跨度类集中在按钮上？”。看到这个，箭头以它自己的方式表现，而不是在按钮的中心。如果代码正常工作，一个等边三角形将出现在按钮的左侧，后面跟着Go back to top。而且我的代码有错误，限制了以上述方式出现。这是正在运行的示例，https://codepen.io/vkdatta27/pen/XWdvMQL

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #101010;
}
<button><span class="arrow-up"></span>Go back to top</button>

标签： javascripthtmljquerycss

解决方案

您可以对按钮容器使用 flexbox 来实现该结果（codepen）。

CSS：

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent; 
  border-bottom: 5px solid #101010;
 }

.container {
  display: flex;
  align-items: center;
}

HTML：

<button class="container"><span class="arrow-up"></span>Go back to top</button> 
<!-- Arrow up isn't in center like other text -->

推荐阅读