Question

http://codepen.io/leongaban/pen/ACJta
^已更新（我无法让SASS在Codepen中正常工作）

无法与上面的元素对齐。使用SASS，我想避免使用position hacks

<main>
  <div class="gradient">
    <div class="hero">
      <img src="http://placehold.it/350x150" alt=""/>
    </div>
  </div>

  <section class="tagline">
    <h1>Hi there Lorem Ipsum <em>My name is Bob</em></h1>
    <button>Learn More</button>
  </section>
</main>

body {
  font-family:Arial
}

.hero {
    display: table-cell;
    //position: relative;
    margin: 0 auto;
    // top: 42%;
    // left: 10%;
    text-align: center;
    width: auto;
    height: 447px;
    vertical-align: bottom;

    img {
        width: 300px;
        height: 280px;
        text-align: center;
        vertical-align: bottom;
        border:0;
    }
}

.tagline {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 300px;
    text-align: center;
    color: blue;
    background: gray;
    z-index: 2;

    h1 {
        margin: 0 auto;
        padding-top: 5%;
        width: 80%;
        font-size: 42px;
        text-align: center;
    }

    em {
        font-weight: bold;
    }

    button {
        margin-top: 25px;
        padding: 10px 20px;
        font-family: Arial;
        font-size: em(21);
        color: white;
        border: 0;
        background: orange;
    }
}

Answer 1

我能够将你的元素集中在我的上面：

.hero {
  margin: 0 auto;
  text-align: center;
  width: 50%;
  height: 447px;
  vertical-align: bottom;
}

由于您已指定width: auto

，因此似乎不想居中

如何对齐此CodePen中的中心元素？

1 个答案: