绝对元素 jQuery 居中问题

Question

我想要做的是水平居中 .buttons-wrapper 这是一个 display: absolute 元素 jQuery （用 CSS 居中是行不通的，因为当有足够的 space 剩余时，它会将 .buttons-wrapper 内的元素包装起来）。问题是，当我将 .btn class 元素的 margin-right 添加到 space 时，它们稍微向右移动，而不是完全居中。我怎样才能解决这个问题，使 .buttons-wrapper 完全居中并且 .btn 元素将 spaced？

@注意：我不知道为什么，但该代码段无法正常工作，但它在我的计算机上工作得很好。

@NOTE2: 我知道可以用flexbox解决，但是解决方案必须IE 9+支持，而IE根本不支持Flexbox。
http://caniuse.com/#search=flexbox

$(function() {
    $('.buttons-wrapper').css({
        'margin-left' : function() {return -$(this).outerWidth()/2},
    });
});

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif; }

.slides, .slide1, .slide2, .slide3 {
  height: calc(100vh - 100px);
  position: relative;
  display: none; }
  .slides h1, .slide1 h1, .slide2 h1, .slide3 h1 {
    position: absolute;
    padding-top: 2em;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 4.25em;
    font-weight: bold; }

.slide1 {
  background: url("images/backgrounds/slider1.jpg") center/cover; }

.slide2 {
  background: url("images/backgrounds/slider2.jpg") center/cover; }

.slide3 {
  background: url("images/backgrounds/slider3.jpg") center/cover; }

.buttons-wrapper {
  position: absolute;
  bottom: 150px;
  left: 50%; }

.btn {
  display: inline;
  opacity: 0.75;
  margin-right: 2.208333333333333em; }
  .btn:hover {
    opacity: 1; }
  .btn a {
    display: inline-block; }
  .btn .paragraph {
    display: inline-block;
    vertical-align: middle;
    color: white;
    padding: 0.5em 0 0.5em 0.5em;
    font-size: 1em;
    width: 220px; }
  .btn .button-red {
    background-color: #c43434; }
  .btn .button-blue {
    background-color: #428e9e; }
  .btn .button-green {
    background-color: #4f8a60; }
  .btn img {
    display: inline-block;
    vertical-align: middle; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
  <div class="slide1 active">
    <h1>Slide no. 1</h1>
  </div>
  <div class="slide2">
    <h1>Slide no. 2</h1>
  </div>
  <div class="slide3">
    <h1>Slide no. 3</h1>
  </div>
<!-- end of slides -->
<!-- slider buttons part -->
  <div class="buttons-wrapper">
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/81x81" alt="typo-icon"><!-- this comment is just to fix the gap between image and paragraph
        --><p class="paragraph button-red">Slide no. 1</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/81x81" alt="rwd-icon"><!-- this comment is just to fix the gap between image and paragraph
        --><p class="paragraph button-blue">Slide no. 2</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/81x81" alt="ux-icon"><!-- this comment is just to fix the gap between image and paragraph
        --><p class="paragraph button-green">Slide no. 3</p>
      </a>
    </div>
  </div>
<!-- end of slider buttons -->
</section>

Answer 1

您不需要 jQuery 来执行此操作。您可以使用 IE9 支持的 transform: translateX() 和 -ms 前缀 - http://caniuse.com/#feat=transforms2d

并且您可以使用 :nth-child() 删除第二个按钮（右侧的按钮）的 margin-right，以便只有左侧的按钮有边距，创建 space 按钮之间。您还可以为每个元素添加唯一的 class 以定位单个元素。

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

.slides,
.slide1,
.slide2,
.slide3 {
  height: calc(100vh - 100px);
  position: relative;
  display: none;
}

.slides h1,
.slide1 h1,
.slide2 h1,
.slide3 h1 {
  position: absolute;
  padding-top: 2em;
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 4.25em;
  font-weight: bold;
}

.slide1 {
  background: url("images/backgrounds/slider1.jpg") center/cover;
}

.slide2 {
  background: url("images/backgrounds/slider2.jpg") center/cover;
}

.slide3 {
  background: url("images/backgrounds/slider3.jpg") center/cover;
}

.buttons-wrapper {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.btn {
  display: inline;
  opacity: 0.75;
  margin-right: 2.208333333333333em;
}
  
.btn:nth-child(2) {
  margin-right: 0;
}

.btn:hover {
  opacity: 1;
}

.btn a {
  display: inline-block;
}

.btn .paragraph {
  display: inline-block;
  vertical-align: middle;
  color: white;
  padding: 0.5em 0 0.5em 0.5em;
  font-size: 1em;
  width: 220px;
}

.btn .button-red {
  background-color: #c43434;
}

.btn .button-blue {
  background-color: #428e9e;
}

.btn .button-green {
  background-color: #4f8a60;
}

.btn img {
  display: inline-block;
  vertical-align: middle;
}

<section id="header">
  <div class="slide1 active">
    <h1>Slide no. 1</h1>
  </div>
  <div class="slide2">
    <h1>Slide no. 2</h1>
  </div>
  <div class="slide3">
    <h1>Slide no. 3</h1>
  </div>
<!-- end of slides -->
<!-- slider buttons part -->
  <div class="buttons-wrapper">
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/81x81" alt="typo-icon"><!-- this comment is just to fix the gap between image and paragraph
        --><p class="paragraph button-red">Slide no. 1</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/81x81" alt="rwd-icon"><!-- this comment is just to fix the gap between image and paragraph -->
<p class="paragraph button-blue">Slide no. 2</p>
</a>
</div>
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/81x81" alt="ux-icon"><!-- this comment is just to fix the gap between image and paragraph
        --><p class="paragraph button-green">Slide no. 3</p>
      </a>
    </div>
  </div>
<!-- end of slider buttons -->
</section>

绝对元素 jQuery 居中问题

Absolute element jQuery centering issue

html

css

jquery

centering