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

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

html css

Html 页脚中的静态社交按钮浮动在页面CSS的中间？,html,css,Html,Css,我生成了社交按钮，并将html代码粘贴到主体中： <body> <div class="shareaholic-canvas" data-app="follow_buttons" data-app-id="28043174"></div> </body> 谢谢试试这个 .shareaholic-canvas{ position: fixed; // this holds the position at all times r

我生成了社交按钮，并将html代码粘贴到主体中：

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

谢谢

试试这个

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

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

试试这个：

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

现在，将其添加到

.btn工具栏

类中

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

在class.btn工具栏中添加以下样式

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

宽度、高度和背景会相应地发生变化，这是一个更完整的演示，包括按钮（链接）容器及其悬停过渡和品牌颜色

正文{
最小高度：10000px；
背景图片：url(https://www.robertlandscapes.com/wp-content/uploads/2018/06/slider-BG-5-2.jpg?x48514);
背景重复：重复；
}
.分享狂画布{
显示器：flex；
弯曲方向：立柱；
位置：固定；
右：0；
最高：50%；
转换：translateY（-50%）translateZ（0）；
z指数：10；
溢出：隐藏；
}
.shareaholic canvas>a{
显示：内联块；
宽度：52px；
高度：42px；
右：-10px；
位置：相对位置；
转换：0.3s转换；
}
.shareaholic画布>a:悬停，
.shareaholic画布>a:焦点{
转换：translateX（-10px）；
}
.youtube{背景色：#e02a20；}
.twitter{背景色：#4da7de；}
.facebook{背景色：#3e5b98；}
.instagram{背景色：#9c7c6e；}

另一个与其他答案差别不大的答案。。但是，通过这种剪接，您可以用更少的代码将元素定位在窗口的正中心

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

对于将来需要将页脚中的灰色共享社交按钮移动到页面中间的情况，这是一个极好且有用的解决方案。我指的是右下角静止的黑色跟随按钮。非常感谢欢迎，如果您对我的答案感到满意，请投票表决，这样其他人就可以很容易地找到合适的ans。这是一个很好的解决方案，可以满足将来需要，将页脚中的灰色共享社交按钮移到页面中间。我指的是右下角静止的黑色跟随按钮。谢谢

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

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