Javascript 如何将旋转木马居中?
我在这里读了一些建议,并且已经试过了,没有一个对我有用。所以我把代码放在这里,看看是否有人能给我指出正确的方向Javascript 如何将旋转木马居中?,javascript,html,css,bootstrap-4,carousel,Javascript,Html,Css,Bootstrap 4,Carousel,我在这里读了一些建议,并且已经试过了,没有一个对我有用。所以我把代码放在这里,看看是否有人能给我指出正确的方向 我想把旋转木马放在中间 我希望在旋转木马中有一个单独的包含文本的容器,我希望该容器看起来有点褪色,可以使用不透明度元素或RGB(0,0,0,0.4)。。元素 HTML- * { margin: 0; padding: 0; } body { font-family: Calibri, sans-serif; } .background-wrap { po
* {
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;
}
我不知道如何在这里发布HTMLs而不会出现间距错误,所以我在codepen中打开了一支笔:
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;
}
嗨@Jaziel_Inc.你太棒了。成功了。非常感谢。你能告诉我怎么把旋转木马弄小一点吗?因为1200太大了,我需要屏幕两侧的边距。嘿,如果你想让旋转木马变小,只需更改“最大宽度”属性,输入你想要的大小,我将1200px作为示例,但你可以更改为你想要的大小,试试看,我不是专家,但我认为是可行的。@ MahiyaHawk,如果这个答案已经解决了你的问题,请考虑点击复选标记。这向更广泛的社区表明,你已经找到了一个解决方案,并给回答者和你自己带来了一些声誉。没有义务这样做。