在容器中居中 div

Question

使用 bootstrap 我试图将 div 与 class smframe 居中。我尝试了各种不同的 CSS 风格，并且在过去的几个小时里一直在苦苦挣扎。似乎还发生的是，段落文本显示在 div 中的图像下方，而 smframe 的 class 而不是下方。

.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

尝试将此样式添加到 smframe:

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

Answer 2

居中

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

在容器中居中 div

center div in container

html

css

centering

bootstrap-modal