我有标题标记,背景上有全宽/高图像。
我需要在页面中心的algin元素完全如图所示。
首先是图像,而不是文本,而不是一个接一个的按钮,而且在页面的最底部是滑块
除了滑块之外,我已设法将所有内容放到中心,代码低于
另外,如果需要,我正在使用boostrap和jquery
这是一个页面设计,这只是一个标题
感谢您的帮助:)
<header>
<img src="" alt="full">
<h1>The</h1>
<a href="" class="btn btn-default btn-green" role="button">Login</a>
<a href="" class="btn btn-default btn-grey" role="button">Browse</a>
<div class="swiper-container">
</div>
</header>
SCSS
header {
margin-top: -56px !important;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
img {
margin-top: 5%;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
}
.btn {
@include Myriad-Pro-Light;
}
.btn-green {
margin-top: 5%;
color: #fff;
}
.btn-grey {
color: #000;
}
.swiper-container {
margin-top: 5%;
width: 100%;
height: 300px;
}
}
答案 0 :(得分:1)
您可以通过在适当的位置使用以下属性来实现此目的。
text-align:center;
display:flex;
align-center;
margin:0 auto;
另外,当您使用引导程序时,某些类可能会被覆盖,因此请确保在要强制设置的属性上使用!important
。
使用您的代码我使用上述建议进行了一些更改,以下是代码:
<header>
<img src="http://placehold.it/350x150" alt="full">
<h1>The</h1>
<a href="" class="btn btn-default btn-green" role="button">Login</a>
<a href="" class="btn btn-default btn-grey" role="button">Browse</a>
<div class="swiper-container">
<p>Large full width div, which must stay on the bottom of the header tag</p>
</div>
</header>
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
min-width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
img {
margin: 0 auto;
display: block;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
text-align:center;
}
.btn {
@include Myriad-Pro-Light !important;
margin: 10px auto !important;
display: block !important;
width: 25vw !important;
text-align:center !important;
padding: 6px 0px !important;
}
.btn-green {
color: #fff;
display:block;
}
.btn-grey {
color: #000;
display:block;
}
.swiper-container {
background-color:red;
width: 100%;
height: 300px;
position:absolute;
bottom:0;
display: flex;
align-items: center;
justify-content: center
}
.swiper-container p{
@include Myriad-Pro-Light !important;
margin:0 auto;
color:white;
font-size: 18px;
}
以下是使用此代码的示例。 http://codepen.io/Nasir_T/pen/PboZme