• 智能AI问答!更聪明、更完整、原创作!
  • 一款基于GPT的超级AI机器人,可以回答问题、聊天、创作、写文案!

vue 如何把一个图标+文字,固定在屏幕右侧

发布于 2023-06-15 17:21:27

可以使用 CSS 的 position 属性来实现。

下面是一个示例代码,将一个图标和文字固定在屏幕右侧。

<div class="fixed-widget">
  <i class="icon icon-phone"></i>
  <span>联系我们</span>
</div>
.fixed-widget {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 24px;
}

上面的代码中,首先使用 position: fixed 将元素固定在屏幕右侧,然后使用 top, right 属性调整元素的位置。

接着使用 display: flexalign-items: center, justify-content: center 属性使图标和文字水平垂直居中。

最后使用其他属性(如背景颜色、字体颜色、内边距等)美化样式。

0 条评论

发布
问题

在线
客服