Question

是否可以在不使用javascript的情况下将元素水平居中于所有可用空间？

我知道如果我margin: 0 auto;，它会将其置于屏幕上。但是，由于我有侧边栏，我希望内容集中在剩余空间，而不是屏幕空间。

我知道使用javascript很容易实现，但我想知道我是否可以使用纯CSS工作。（https://jsfiddle.net/dxb2rr8k/）

Javascript代码看起来像这样（https://jsfiddle.net/a5n59bxn/）：

$(window).on('resize', function () {
  centerContent();
});

function centerContent() {
  var sidebarWidth = $('.sidebar').width();
  var contentWidth = $('.content').width();
  var windowWidth = $(window).width();

  $('.content').css('margin-left', (windowWidth / 2) - sidebarWidth);
}

Answer 1

＆＃13;

html, body, .wrap {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 100px;
  background: red;
  height: 100%;
  min-height: 100%;
  float: left;
}

.content {
  overflow: hidden;
  background: blue;
  margin: 0 auto;
  width: 300px;
}

＆＃13;

<div class="wrap">
  <div class="sidebar"></div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eveniet, iure maiores optio provident quod illum deleniti saepe error corporis molestiae reiciendis omnis, sapiente perspiciatis dolore nesciunt unde, eligendi quisquam reprehenderit. Corporis accusamus beatae, quisquam voluptas deleniti, nam libero dolore, odio maiores blanditiis error sit ad earum iusto quia distinctio.
    </p>
  </div>
</div>

＆＃13;

中心元素水平基于可用空间

1 个答案: