我如何将我的旋转木马放在中心位置?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我如何将我的旋转木马放在中心位置?相关的知识,希望对你有一定的参考价值。
我在这里读了一些建议并尝试过,但没有一个适合我。所以我在这里包含我的代码,看看是否有人可以指出我正确的方向。
- 我想把旋转木马放在中心位置。
- 我希望在旋转木马内部有一个带有文本的单独容器,我想要使用不透明度元素或RGB(0,0,0,0.4)..元素看起来有点褪色。
html的
我无法弄清楚如何在这里发布HTML而不会出现间距错误,所以我在codepen中打开了一支笔:
https://codepen.io/mahiya-hawk/pen/YvZMbM
CSS-
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: -1000;
}
#video-bg-elem {
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.navbar{
background-color: RGBA(0,0,0,0.2) !important;
}
#brand-image{
height: 100px;
}
a.navbar-brand{
position: relative;
}
.navbar-nav > li{
margin-left:10px;
padding: 33px 10px;
}
.navbar-nav > li > a{
text-decoration: none;
font-size: 2vh;
font-size: 2.3vw;
font-family: 'Freestyle Script';
font-weight: 900;
color: rgb(210, 21, 84) !important;
padding-bottom: 0.2%;
display: block;
}
.navbar-nav > li:hover,
.navbar-nav > li:focus {
background-color: RGBA(0,0,0,0.4) !important;
transition: .9s;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
background-color: RGBA(0.0..0.4) !important;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin-top: 5%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.navbar-expand-lg .navbar-collapse {
margin:-7px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
width: 1200px;
margin-bottom: 480px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 480px;
}
答案
把这个规则放到你的班级:
.carousel {
max-width: 1200px;
width: auto;
margin: 0 auto 0 auto;
text-align: center;
}
以上是关于我如何将我的旋转木马放在中心位置?的主要内容,如果未能解决你的问题,请参考以下文章