html - 带有 float 元素的行中的中心图像

Question

我正在使用 bootstrap 3 并希望在页面上居中放置一个 Logo ，同时在其右侧包含一个按钮。 Logo 应在页面居中，并忽略按钮的宽度。

我已经用 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

您可以在 Logo 上应用 css 使其水平居中且不受按钮宽度的影响:

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

.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;
}

<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>