Question

我似乎无法将我的按钮置于屏幕中间。

这是jsFiddle：http://jsfiddle.net/c7xuo1bv/

我不确定为什么按钮向左倾斜。我将左边距设置为自动边距。我认为这可能是一个定位问题，但我尝试了相对和绝对的位置，但无济于事。

HTML：

<header>
  <div class="background_image">
  </div>
  <div class="welcome-text-container">
    <div class="row">
      <div class="welcome-text1">Welcome to Boothie!</div>
      <div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
      <div class="btn-row">
      <a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a>
      </div>
    </div>
  </div>
</header>

CSS：

.welcome-text-container {
    /* z index --> stack order, higher == top of stack*/
    z-index: 100;
    /* relative position moes an element RELATIVE to its original position
        ie: behind the image!
    */
    position: relative;
    padding-top: 300px;
    padding-bottom: 200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.welcome-text1 {
    text-align: center;
    color: #FFF;
    font-size: 40px;
}

.welcome-text2 {
    text-align: center;;
    font-size: 75px;
    font-weight: 800;
    color: #FFF;
    padding-bottom: 25px;
}

.welcome-btn {
    text-align: center;
    background-color: #ecf9f8;
    font-weight: 400;
    font-size: 20px;
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
}

.btn-row {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.row {
    padding-left: 50px;
    padding-right: 50px;
}

Answer 1

text-align style会影响元素的内联内容，而不是元素本身。

您必须将样式移至父<div>：

.btn-row {
    text-align: center;
    /* ... */
}

http://jsfiddle.net/c7xuo1bv/1/

Answer 2

你可以添加

.row {
    text-align: center;
}

将所有元素集中在一起。

DEMO

居中<a> button within a div</a>

2 个答案: