Центрирование относительного div к фоновому изображению - PullRequest
Новая
       13

Центрирование относительного div к фоновому изображению

1 голос
/ 30 апреля 2019

Я хотел бы знать, как расположить блок Div Box по центру и относительно фонового изображения, чтобы оно оставалось отзывчивым? Блок div должен находиться внутри белого блока. Например. http://sendvid.com/t4d85cqe

body{
  font-family: 'Roboto Mono', monospace;
  background-image: url("assets/handheld_bg_white.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.overlay-box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index: 1000;
}

Спасибо. :)

Ответы [ 3 ]

0 голосов
/ 30 апреля 2019

Я хотел бы проверить CSS flexbox, он действительно хорош для центрирования объектов по вертикали и горизонтали вместе с тонами других полезных битов.

Flexbox хорош для проектирования зданий, где очень важно позиционирование и очень помогает вподдержание согласованности.

Этот учебник является хорошей отправной точкой .

Найдите ниже и пример очень похожего примера, чтобы вы могли применить его к своему.(Он центрируется сначала вертикально, а затем горизонтально по центру back-ground). 

.back-ground {
  height: 150px;
  width: 150px;
  display: flex;
  background: #FF0000;
  flex-direction: column;
  justify-content: center;
}

.box {
display: flex;
justify-content: center;
}

.text {
 color: #FFFFFF;
}
<div class="back-ground">
    <div class="box">
        <span class="text">x</span>
    </div>
</div>
0 голосов
/ 30 апреля 2019

Вы можете сделать это в css, используя свойства «display: flex», «justify-content: center» и «align-items: center».Вот скрипка https://jsfiddle.net/yr510dcb/, а ниже приведен пример кода: 

body{
  font-family: 'Roboto Mono', monospace;
  background-image: url("assets/handheld_bg_white.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.background {
  display: flex;           /* establish flex container */
  justify-content: center; /* center items vertically */
  align-items: center;     /* center items horizontally */
  height: 50vw;
  width: 80vw;
  padding: 20px;
  margin: 20px;
  background-color: blue;
  position:relative;
  z-index: 100;
  
}

.overlay-box {
  display: flex;           /* establish flex container in case its content needs to be centered */
  justify-content: center; /* center items vertically in case its content needs to be centered */
  align-items: center;     /* center items horizontally in case its content needs to be centered */
  margin: 0 auto;
  height: 25vw;
  width: 25vw;
  background-color: white;
  position:relative;
  z-index: 1000;
  position:relative;
}
<div class = "background">
  <div class = "overlay-box">
  </div>
</div>

Эти свойства используются в родительском div (в данном случае «background») для центрирования его содержимого - дочернего div («overlay-box»).Я также добавил атрибуты "flex" и "center" в дочерний элемент, поэтому его содержимое снова центрируется, но вы можете удалить его, не затрагивая центрирование самого "оверлейного блока".

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

<div class = "background">
  <img src="/image.png" class="responsive">  /* image location - in this case a local image */
  <div class = "overlay-box">
  </div>
</div>

и добавить адаптивный класс в css, чтобы сделать его отзывчивым, и размер родительского элемента: 

.responsive {
  width: 100%;
  height: auto;
}
0 голосов
/ 30 апреля 2019

Вы не упомянули, должен ли это быть чистый CSS, но если вы можете использовать Bootstrap 4, то вы можете сделать это следующим образом: 

<div class="d-flex justify-content-center align-items-center">
    <div>
        Hello world
    </div>
</div>
...