jquery - 绝对元素 jQuery 居中问题

Question

我想要做的是水平居中 .buttons-wrapper 这是一个带有 jQ​​uery 的 display: absolute 元素(用 CSS 居中它不起作用因为它会在 .buttons-wrapper 中包含足够的空间时包装元素)。问题是，当我将 margin-right 添加到 .btn 类元素以将它们隔开一点时，它们向右移动的幅度比完全居中的幅度大。我怎样才能解决这个问题，让 .buttons-wrapper 完美居中并且 .btn 元素间隔开？

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

@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 来执行此操作。您可以使用 transform: translateX()，它在 IE9 中受支持，带有 -ms 前缀 - http://caniuse.com/#feat=transforms2d

并且您可以使用 :nth-child() 从第二个按钮(右边的那个)中删除 margin-right 这样只有按钮左边有一个边距，在按钮之间创建空间。您还可以为这些元素中的每一个添加一个独特的类，以针对单个元素。

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>