как центрировать div с фоновым изображением в другом div

Question

есть div с тестом класса, и я не могу поместить центр в div с col-lg- 12. это мой код:

<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

Если вы хотите решить проблему с помощью начальной загрузки, просто поставьте пустым div, добавив класс col-lg-5 выше текущего div и отредактируйте следующий div как col-lg-1.Таким образом, следующий div будет размещен в центре (6-е место) в сетке.

.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-sm-5"></div>
  <div class="col-sm-1">

    <div class="test"></div>
  </div>
</div>

Answer 2

Поскольку ваш элемент .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 (так как это недопустимое определение).

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

используйте 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>