中心图像与浮动元素的行

Question

我正在使用bootstrap 3并希望在页面上居中徽标，但也包含右侧的按钮。徽标应该在页面中央，并忽略按钮的宽度。

我用JS实现了这一点，但我想要一个纯粹的CSS解决方案。如果有帮助，我正在使用LESS。

$(document).ready(function() {
  var logo = $('.logo img');
  var pdfBtn = $('#pdf-button');
  var win = $(window);

  var alignlogo = function() {
    var pdfBtnWidth = pdfBtn.outerWidth();
    logo.css({
      'position': 'relative',
      'left': pdfBtnWidth / 2
    })
  };

  win.on('load resize orientationchange', alignlogo);
});

.transaction-head {
  text-align: center;
}
.transaction-head-logo {
  max-width: 200px;
  max-height: 50px;
  margin-bottom: 20px;
  @media screen and (min-width: @screen-sm) {
    max-width: 300px;
    max-height: 75px;
  }
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<div class="transaction-head">
  <div class="top-block clearfix">
    <a id="pdf-button" class="btn btn-primary pull-right" href="/url/to/generate/pdf" target="_new">
                Download PDF
            </a>
    <div class="logo">
      <img class="transaction-head-logo" src="url/to/logo">
    </div>
  </div>
</div>

Answer 1

您可以在徽标上应用css，使其水平居中，不受按钮宽度的影响：

.logo {
  transform: translateX(-50%);
  position: absolute;
  left: 50%:
}

＆＃13;

＆＃13;

.transaction-head {
  text-align: center;
  padding: 10px;
}

.transaction-head .logo {
  transform: translateX(-50%);
  position: absolute;
  width: 200px;
  height: 50px;
  left: 50%;
}
@media screen and (min-width: @screen-sm) {
  width: 300px;
  height: 75px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="transaction-head">
    <div class="top-block clearfix">
        <a id="pdf-button" class="btn btn-primary pull-right" href="/url/to/generate/pdf" target="_new">
            Download PDF
        </a>
        <div class="logo">
            <img class="transaction-head-logo" src="url/to/logo">
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您希望图片位于中心，只需从js代码中移除'left': pdfBtnWidth / 2，因为它会将图片left:50px提供给完全没用的图像。

$(document).ready(function() {
  var logo = $('.logo img');
  var pdfBtn = $('#pdf-button');
  var win = $(window);

  var alignlogo = function() {
    var pdfBtnWidth = pdfBtn.outerWidth();
    logo.css({
      'position': 'relative',
      //'left': pdfBtnWidth / 2
    })
  };

  win.on('load resize orientationchange', alignlogo);
});

.transaction-head {
  text-align: center;
}
.transaction-head-logo {
  max-width: 200px;
  max-height: 50px;
  margin-bottom: 20px;
  @media screen and (min-width: @screen-sm) {
    max-width: 300px;
    max-height: 75px;
  }
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<div class="transaction-head">
  <div class="top-block clearfix">
    <a id="pdf-button" class="btn btn-primary pull-right" href="/url/to/generate/pdf" target="_new">
                Download PDF
            </a>
    <div class="logo">
      <img class="transaction-head-logo" src="url/to/logo">
    </div>
  </div>
</div>