Как сделать так, чтобы текст был в центре страницы, но при этом - имел фон такой-же ширины как и текст?
То есть, получается нужно разместить окошко, в центре страницы, с шириной его содержимого, но не больше max-width
- указанной максимальной ширины.
При этом, чтобы когда уменьшаем разрешение окна браузера, нужно, чтобы он оставался в центре и если текст очень большой, появлялся скролл внутри этого окошка где текст.
Пытался сделать так:
.window {
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
will-change: transform;
}
.window .win {
max-width: 700px;
max-height: 190px;
margin: auto;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 7px 3px;
will-change: transform;
}
.window .win .wincon {
width: auto;
height: 190px;
background: rgba(255, 255, 255, .9);
overflow-y: auto;
}
<div class="window">
<div class="win">
<div class="wincon">
<p>
111111111
</p>
<p>
222222222
</p>
<p>
111111111
</p>
<p>
222222222
</p>
<p>
111111111
</p>
<p>
222222222
</p>
<p>
111111111
</p>
<p>
222222222
</p>
</div>
</div>
</div>
Но ничего не получается, должно быть так:
И так должно быть до максимальной указанной ширины.
Как такое сделать?
Вообще возможно ли?