вертикальный и горизонтальный центр только на мобильном телефоне - PullRequest
Новая
       11

вертикальный и горизонтальный центр только на мобильном телефоне

0 голосов
/ 15 января 2019

Я бы хотел центрировать колонку в мобильном телефоне только там, где у меня фиксированная высота для моего раздела. 

<div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

Есть идеи как этого добиться?

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Хотите изучить FlexBox? Это действительно удобно для центрирования предметов, как по горизонтали, так и по вертикали. Вы хотите заключить свой код в родительский div и установить 

display:flex; 
align-items: center; //For horizontal centering
justify-content: center; //For vertical align

Примерно так: https://jsfiddle.net/jvknog1d/

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 462px;
}
<div class="parent">
  <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; ">
    <div class="container">
      <div class="row h-100">
        <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
        <div class="col-12 my-auto col-md-7">
          <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
0 голосов
/ 15 января 2019

Вы должны использовать «@media only screen» в своем CSS для изменения настроек для разных разрешений. 

.mysection{
background-image: url("https://via.placeholder.com/728x462.png?text=placeholder"); 
background-position: right bottom; 
background-size: cover; 
height: 462px;
}





@media only screen and (max-width: 600px) {
  .mysection {
    text-align : center;
  }
}
<div class="mysection">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" ><img class="img-fluid mx-auto d-block" style="border: 1px solid;" src="https://via.placeholder.com/200x200.png?text=image"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

для получения дополнительной информации, вы можете проверить эту ссылку .

...