Question

我生成了社交按钮，并将代码粘贴到了HTML正文中：

<body>
<div class="shareaholic-canvas" data-app="follow_buttons" data-app-id="28043174"></div>
</body>

问题在于按钮在页脚内的右下角保持静态：http://builder.ferozo.com/1589630/#!/-home/

我希望它们始终像下面的示例一样漂浮在右中角：https://www.robertlandscapes.com/。

我已经在CSS中尝试将div属性垂直对齐到中间，但是由于当我尝试使用其他属性（例如display）时，按钮仅停留在页脚中或移入页眉中，因此无法实现。

HTML

<div class="shareaholic-canvas"
data-app="follow_buttons"
data-app-id="28043174">
</div>

CSS

.shareaholic-canvas {

}

谢谢！

Answer 1

尝试一下。

.shareaholic-canvas{
     position: fixed; // this holds the position at all times
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
}

Answer 2

我最好的建议是使用position属性。就像您的示例一样，社交按钮固定在网站的右侧（中间）。

尝试一下：

body {
      position: relative;
}
.shareaholic-canvas {
      position: fixed;
      top: calc(50%);
      z-index: 100;
      right: 0;
}

Answer 3

在这里，将其添加到.btn-toolbar类中。

.btn-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; 
}

Answer 4

在.btn-toolbar类中添加以下样式

.btn-toolbar{
background-color: #00704afa;
    position: fixed;
    right: -145px;
    top: 25%;
    transform: rotate(90deg);
    transform-origin: left top 0;
}

宽度和高度以及背景会相应改变

Answer 5

这是一个更完整的演示，包括按钮（链接）容器及其悬停过渡和品牌颜色。

body {
  min-height: 10000px;
  background-image: url(https://www.robertlandscapes.com/wp-content/uploads/2018/06/slider-BG-5-2.jpg?x48514);
  background-repeat: repeat;
}

.shareaholic-canvas {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  z-index: 10;
  overflow: hidden;
}

.shareaholic-canvas > a {
  display: inline-block;
  width: 52px;
  height: 42px;
  right: -10px;
  position: relative;
  transition: 0.3s transform;
}

.shareaholic-canvas > a:hover,
.shareaholic-canvas > a:focus {
  transform: translateX(-10px);
}

.youtube { background-color: #e02a20; }

.twitter { background-color: #4da7de; }

.facebook { background-color: #3e5b98; }

.instagram { background-color: #9c7c6e; }

<div class="shareaholic-canvas">
  <a class="youtube" href="#"></a>
  <a class="twitter" href="#"></a>
  <a class="facebook" href="#"></a>
  <a class="instagram" href="#"></a>
</div>

jsFiddle

Answer 6

另一个答案与其他答案没有太大区别。但是，通过此代码，您可以用更少的代码将元素放置在窗口的确切中心。

.shareaholic-canvas {
    position: fixed;
    right: 0;
    top: calc(50% - 72.5px);
}

页脚中的静态社交按钮浮动在页面CSS的中间吗？

6 个答案: