Css 如何使徽标在调整浏览器大小时仍保持在位

HTML

测试1
测试2
CSS
[类别*=“比率”]{
位置：相对；}
[类别*=“比率”]：之后{
内容：''；
显示：block；}
[类别*=“比率”]。cly比率内容{
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；}
.比率-1439-330：之后{
填充顶部：22.932592078%；}
.l-中心{
保证金：0自动；
}
.square标志{
背景：#fff；
位置：绝对位置；
宽度：180px；
高度：180像素；
底部：25px；
左：0；
左边距：115px；
z指数：800；
不透明度：1；
}
.bg封面{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.导航标签{
边界底部：0；
}
.导航{
页边距底部：0；
}

目前它在JSFIDLE上工作，但在我的本地机器上不工作，所以您可能不理解我的要求。 Bootstrap仅用于可单击的选项卡。在调整浏览器大小时，徽标会从左向右移动，移动时看起来会跳跃。另一个问题是，对于选项卡窗格内容，具有l中心和最大宽度的div似乎不能很好地工作。怀疑是因为没有高度

有没有办法强制使徽标与选项卡内容垂直对齐，并且在浏览器调整大小时选项卡也应移动

---

谢谢你的帮助

如果我理解正确，问题一定是下面的代码块有一个固定的左边距属性值115px。所以它实际上并没有改变大小，它只是依赖于给定的边距值。直到没有固定的边际，这种情况将继续发生

.square-logo {
     background: #fff;
     position: absolute;
     width: 180px;
     height: 180px;
     bottom: 25px;
     left: 0;
     margin-left: 115px;
     z-index: 800;
     opacity: 1;
}

修复我建议您执行以下操作

     .square-logo{
          background: #fff;
          position: absolute;
          width: 50%; /* Adjust as needed */
          height: auto;
          bottom: 25px;
          left: 25%; /* Adjust as needed */
          z-index: 800;
          opacity: 1;
        }

---

注意：您可能需要调整示例以满足您的需要。只是不要使用左边距，首先请删除内联css以保持灵活性。如果你的html代码是这样的

 <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="square-logo">
                        <a href="#"><img src="images/logo.png" alt="Logo"></a>
                </div>      <!-- End Logo Block -->
            </div> <!-- End Column 12 -->
        </div> <!-- End row -->
</div> <!-- End Container -->

---

谢谢，但如前所述，bootstrap只是用于标签的点击，我不能使用bootstrap来做和你相同的例子：（哦，谢谢，我稍后会测试它，希望它能工作。谢谢，如果仍然有问题，我会报告回来

 <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="square-logo">
                        <a href="#"><img src="images/logo.png" alt="Logo"></a>
                </div>      <!-- End Logo Block -->
            </div> <!-- End Column 12 -->
        </div> <!-- End row -->
</div> <!-- End Container -->

.square-logo {
    display: table;
    margin: 0 auto;
}