Question

我不确定为什么我的文字没有居中在页面中间。我使用margin-left和right设置为auto。我是前端开发人员的新手，所以我目前遇到了一些麻烦。在我的页面上，它当前位于左侧

这是jsFiddle：http://jsfiddle.net/o7rq7t0k/1/

HTML：

<header>
  <div class="background_image">
  </div>
  <div class="welcome-text-container">
    <div class="row">
      <h1 class="welcome-text1">Welcome!</h1>
    </div>
  </div>
</header>

CSS：

.background_image {
    background-image: image-url("header-bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; 
    position: absolute;
    /* (img-height / img-width * width) */
    /* (853 / 1280 * 100) */
}

.welcome-text-container {
    z-index: 100;
    position: absolute;
    padding-top: 300px;
    padding-bottom: 200px;
    /*display: block;*/
    margin-left: auto;
    margin-right: auto;
}
.row {
    padding-left: 50px;
    padding-right: 50px;
}

Answer 1

这是＆＃34;位置＆＃34;的原因。属性。看看这个jsfiddle：

`http://jsfiddle.net/o7rq7t0k/2/`

Answer 2

要在屏幕中居中元素，您必须确保容器宽度设置为100%。

.welcome-text-container { width: 100%; }

小提琴：http://jsfiddle.net/o7rq7t0k/3/

如何将文本置于图片顶部

2 个答案: