Question

我要做的是水平居中.buttons-wrapper这是一个display: absolute元素与jQuery（以CSS为中心不起作用，因为它包含了.buttons-wrapper内的元素当剩下足够的空间时）。问题在于，当我向.btn类元素添加margin-right以将它们分开一点时，它们会向右移动而不是完全居中。我该如何解决这个问题，以便.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来做这件事。您可以使用IE9支持的transform: translateX() -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>

绝对元素jQuery集中问题

1 个答案: