Центрирование div с фиксированным и центрированным фоном - PullRequest
Новая
       6

Центрирование div с фиксированным и центрированным фоном

0 голосов
/ 04 марта 2020

Я пытаюсь сделать div для центрирования на странице с фиксированным и центрированным фоном, но он добавляет горизонтальные и вертикальные полосы прокрутки, которые перемещают div по всей странице, сохраняя при этом фон. Фон - именно то, что я хочу, но мне нужно, чтобы div был центрирован и отзывчив.

CSS: 

.landingImg{
    margin-top: -35px;
    margin-right: -50px;
    background: url("https://i.imgur.com/VW2izVa.png");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height: 800px;

    min-width: 1560px;
    display: flex;
}
.jumbo{
    justify-content: center;
    margin:auto;
    margin-top:10%;
    /* padding: 20px; */
    width: 475px;
    max-width: 475px;
    background:url("https://i.imgur.com/0XoMcjD.png");
    background-size: 100% 100%;


}

.jumboContain{
    padding: 30px;
    text-align: center;
}
.call2Action{
    font-weight: bold;
    font-size: 20px;
}
.playBtn {
    margin: auto;
    background: #5a3c1c;
    border: none;
    width: 300px;
}

Соответствует HTML: 

 <div className="jumbo">
                    <div className="jumboContain">
                        <h1 className="display-4">KnightFall</h1>
                        <p className="lead">In a world where evil is left to thrive, a hero is needed to bring balance to the force! </p>
                        <hr className="my-4"></hr>
                        <p className="call2Action">Will you be that hero?</p>
                        <a className="playBtn btn btn-primary btn-lg btn-block" href="/signup" role="button">Play Now</a>
                    </div>
                </div>
            </div>

Спасибо !!

1 Ответ

0 голосов
/ 04 марта 2020

Вот фрагмент, который вы можете затем адаптировать к вашим потребностям: 

.outer {
    width: 500px;
    height: 300px;
    background-color: blue;
    /* these 3 lines below do the magic */
    display: flex;
	align-items: center;
	justify-content: center;
}

.inner {
    width: 80px;
    height: 100px;
    background-color: red;
}
<div class="outer">
    <div class="inner">
    </div>
</div>
...