使用引导程序，我正在尝试将div以类smframe居中。我尝试了各种不同的CSS样式，并且在最近几个小时内一直处于挣扎状态。似乎也正在发生的是，段落文本显示在div中图像的下方，其类别为smframe，而不是其下方。
.armando {
background-image: url("../images/armando.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
object-fit: scale-down;
transform: rotate(90deg);
padding-top: 20px;
}
.three {
height: 30rem;
width: auto;
border: 2px solid white;
}
.smframe {
width: 20rem;
height: 16rem;
margin: auto;
border: 3px solid white;
margin-top: 2rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
.frame1 {
margin: auto;
border: 3px solid #8d9ba0;
margin-top: 2rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}<div class=" container-fluid">
<div class="row">
<div class="container darkBG three col-lg-4 col-md-12 col-sm-12 col-xs-12"><h4 class="text-center">Sleeping arrangements</h4>
<div class="smframe bedroom"></div>
<div class=""><p>Sleeps 2/4 + baby (1 Bedroom)The bedroom double Bed and the lounge has a double couch bed and a baby cot.</p></div>
</div>
<div class="container darkerBG three col-lg-4 col-md-12 col-sm-12 col-xs-12"><h4 class="text-center">Albufeira Old Town</h4>
<div class="smframe rooftop"></div>
<div class=""><p>Sleeps 2/4 + baby (1 Bedroom)The bedroom double Bed and the lounge has a double couch bed and a baby cot.</p></div>
</div>
<div class="container darkestBG three col-lg-4 col-md-12 col-sm-12 col-xs-12"><h4 class="text-center">Local bars and resturants</h4>
<div class="smframe armando"></div>
<div class=""><p>Sleeps 2/4 + baby (1 Bedroom)The bedroom double Bed and the lounge has a double couch bed and a baby cot.</p></div>
</div>
</div>
</div>
答案 0 :(得分：0)
居中
嗯，使用您的代码，您的图片已经居中了。关键是margin: auto为您完成居中。如果您不想使用它，则可以选择使用flexbox。
定位
至于文字未显示在图像下方，这是因为您应用了position: absolute。删除它，它将呈现预期的效果。
.armando {
background-image: url("https://imgc.allpostersimages.com/img/posters/leo-cullum-scotch-and-toilet-water-new-yorker-cartoon_u-L-PGQ1WD0.jpg?src=gp&w=300&h=375");
}
.bedroom {
background-image: url("https://pre00.deviantart.net/5580/th/pre/f/2012/355/f/8/comic__sleeping_reality_by_ayuma__chan-d5or92n.png");
}
.rooftop {
background-image: url("https://s3.amazonaws.com/lowres.cartoonstock.com/restaurants-chinese_restaurant-chinese_cuisine-chinese_food-danger_zones-danger_signs-hscn751_low.jpg");
}
.three {
height: 30rem;
width: auto;
border: 2px solid white;
}
.smframe {
width: 20rem;
height: 20rem;
margin: auto; //if you remove this, it will no longer be centered
border: 3px solid white;
margin-top: 2rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
// position: absolute; --> remove this
object-fit: scale-down;
// transform: rotate(90deg);
padding-top: 20px;
}
.frame1 {
margin: auto;
border: 3px solid #8d9ba0;
margin-top: 2rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}<div class=" container-fluid">
<div class="row">
<div class="container darkBG three col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h4 class="text-center">Sleeping arrangements</h4>
<div class="smframe bedroom"></div>
<div class="">
<p>Sleeps 2/4 + baby (1 Bedroom)The bedroom double Bed and the lounge has a double couch bed and a baby cot.</p>
</div>
</div>
<div class="container darkerBG three col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h4 class="text-center">Albufeira Old Town</h4>
<div class="smframe rooftop"></div>
<div class="">
<p>Sleeps 2/4 + baby (1 Bedroom)The bedroom double Bed and the lounge has a double couch bed and a baby cot.</p>
</div>
</div>
<div class="container darkestBG three col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h4 class="text-center">Local bars and resturants</h4>
<div class="smframe armando"></div>
<div class="">
<p>Sleeps 2/4 + baby (1 Bedroom)The bedroom double Bed and the lounge has a double couch bed and a baby cot.</p>
</div>
</div>
</div>
</div>
答案 1 :(得分：-2)
尝试将此样式添加到smframe：
<div class="smframe" style="width: 100%; margin-left: auto; margin-right: auto;"></div>