Question

使用引导程序，我正在尝试将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>

Answer 1

居中

嗯，使用您的代码，您的图片已经居中了。关键是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>

Answer 2

尝试将此样式添加到smframe：

<div class="smframe" style="width: 100%; margin-left: auto; margin-right: auto;"></div>

容器中心div

2 个答案: