Question

HTML

    <div class="ratio-1439-330 bg-cover" style="background-image: url('https://www.agtinternational.com/wp-content/uploads/2013/11/City-solution.jpg');">
      <div class="l-center" style="max-width: 1240px;">
       <div class="square-logo bg-cover"
        style="background-image:url('http://www.astronautamarcospontes4077.com.br/wp-content/uploads/2014/07/person-icon.png');">
        </div>

        <div class="header-cover" style="background-color: #373737; opacity: 0.9; position: absolute; bottom: 0; left:0; width: 100%; overflow: hidden; padding: 10px 0;">
          <div class="l-center" style="max-width: 1240px">
          <div class="nav nav-tabs" style="margin-left: 338px">
            <a class="active" href="#overview" data-toggle="tab">
              Overview
            </a>
            <a href="#visits" data-toggle="tab">
              Visit
            </a>
          </div><!-- ./tab-lined-top-->
       </div><!--tabs-->
       </div><!--header cover-->
     </div>
    </div>

    <div class="tab-content l-center" style="max-width: 1240px;">
      <div id="overview" class="tab-pane active">
        <div class="l-center" style="max-width: 1240px;background:red;">
         TEST 1
       </div>
      </div><!--#overview-->
      <div id="visits" class="tab-pane">
       <div>
       TeST 2
      </div>
      </div>
    </div><!--tab-content-->

CSS
[class*="ratio"] {
  position: relative; }
  [class*="ratio"]:after {
    content: '';
    display: block; }
  [class*="ratio"] .cly-ratio-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.ratio-1439-330:after {
  padding-top: 22.932592078%; }

.l-center{
  margin: 0 auto;
}

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

.bg-cover{
   background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

.nav-tabs{
  border-bottom: 0;
}

.nav{
  margin-bottom: 0;
}

目前它适用于jsfiddle，但不适用于我的本地机器，因此您可能无法理解我的要求。 Bootstrap仅用于可点击的标签。当浏览器调整大小时，徽标从左向右移动，并且在移动时看起来很跳跃。另一个问题是具有l-center和max-width的div似乎不适用于选项卡窗格内容。怀疑是因为没有身高。

是否有任何方法可以强制使徽标垂直排列到选项卡内容，并且在浏览器调整大小时标签应该移动？

帮助表示赞赏！

Answer 1

如果我理解正确，问题必定是下面的代码块具有固定的页边距属性值 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;
        }

注意：您可能需要调整示例以满足您的需要。只是不要使用 margin-left

Answer 2

首先请删除内联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 -->

然后让您的徽标中心添加此css代码。

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

即使在调整浏览器大小时，如何使徽标保持在适当位置

2 个答案: