我不确定为什么我的文字不在页面中间。我将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;
}
为了使元素在屏幕中居中，必须确保容器宽度设置为100%。
.welcome-text-container { width: 100%; }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句