如何在另一个div中将div与背景图像居中

Question

有一个带有类测试的div，我无法使用col-lg-12在div中放置中心。这是我的代码：

<style>
      .test{
        background-image: url('asa.jpeg') no-repeat;
        background-size: contain;
        background-position: center;
       width:150px; 
       height: 150px; 
        border-radius: 87px;
        }
</style>


    <div class="row">
        <div class="col-lg-12">
            <div class="test"></div>
        </div>
    </div>

我该怎么办？

Answer 1

将margin:0 auto;用于类.test，并删除no-repeat

.test {
    background-image: url(https://via.placeholder.com/350x150) ;
    background-size: contain;
    background-position: center;
    width: 150px;
    height: 150px;
    border-radius: 87px;
    margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="test">
    </div>
  </div>
</div>

或 如果您想使用no-repeat，请使用background:代替background-image:和background-size:cover;

.test {
    background: url(https://via.placeholder.com/350x150)no-repeat;
    background-size: cover;
    background-position: center;
    width: 150px;
    height: 150px;
    border-radius: 87px;
    margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="test">
    </div>
  </div>
</div>

Answer 2

如果您想使用引导程序来解决问题，只需将添加了类div的空col-lg-5置于当前div上方，然后编辑下一个{{1} }设为div。因此，下一个div将放置在网格系统的中心（第6个）。

col-lg-1

.test{
  background-image: url('https://placekitten.com/200/300');

  
          background-size: contain;
        background-position: center;
       width:150px; 
       height: 150px; 
        border-radius: 87px;
/*    margin:auto; */
 }

Answer 3

这是您的div利润问题。您可以使用chrome开发人员工具 Ctrl + Shift + I 轻松检查它。

解决方案是将 margin设置为auto 。

.test{
  background-image: url('https://placekitten.com/200/300');
          background-size: contain;
        background-position: center;
       width:150px; 
       height: 150px; 
        border-radius: 87px;
   margin:auto;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-12">
    <div class="test"></div>
  </div>
</div>

Answer 4

由于您的.test元素具有固定的宽度，因此您可以使用自动边距将其在父元素内居中：

.test{
  background-image: url('https://placekitten.com/408/287');
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  height: 150px; 
  margin-left: auto;
  margin-right: auto;
  width:150px; 
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-12">
    <div class="test"></div>
  </div>
</div>

请注意，我们还需要删除no-repeat上的background-image定义（因为这不是有效的定义）。