Установка ширины по центру <div>с использованием «display: flex» и «justify-content: center» - PullRequest
Новая
       7

Установка ширины по центру <div>с использованием «display: flex» и «justify-content: center»

0 голосов
/ 01 мая 2018

Я вышел из скрытого переполнения стакера, потому что я чешу голову, пытаясь понять это.

Я пытаюсь использовать «display: flex» & «justify-content: center» для центрирования div, но всякий раз, когда я пытаюсь использовать «width: 800px», он делает ширину div 100% страницы.

Кто-нибудь может порекомендовать, как лучше всего установить ширину моего div, при этом центрируя его? 

body {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            background-color:black; }
    
    h1 {
            line-height:87%;
            color:yellow; }
    
    .page {
            display:block;
            z-index:1;
            height:100%;
            width:100%; }
    
    .centerA
            {
            position:relative;
            z-index:2;
            top: 5%;
            display:flex;
            justify-content:center;
            min-width:100vh; }
    
    .center {
            z-index:3;
            position:relative;
            text-align:center;
            top: 5%;
            background-color:black;
            border-style:solid;
            border-width:1px;
            border-color:orange;
            font-size:250%; }
<html> 
<div class="page">
            <div class="centerA">
                <div class="center">
                    <h1> This is a test page
                    </h1>
                </div>
            </div>
    </div>
    
    
    </html>

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Куда вы добавляете атрибут ширины? Попробуйте добавить его в дочерний блок (в центре) 

.center {
    z-index:3;
    position:relative;
    text-align:center;
    top: 5%;
    width: 800px; //also you could use flex-basis:800px for more flexbox approach
    background-color:black;
    border-style:solid;
    border-width:1px;
    border-color:orange;
    font-size:250%; }
0 голосов
/ 01 мая 2018

Центру A дали ширину 100vh, что было проблемой. Я обновил код ниже. justify-content работает так, как ожидается. 

body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        background-color:black; }

h1 {
        line-height:87%;
        color:yellow; }

.page {
        display:block;
        z-index:1;
        height:100%;
        width:100%; }

.centerA
        {
        position:relative;
        z-index:2;
        top: 5%;
        display:flex;
        justify-content:center;
        }

.center {
        z-index:3;
        position:relative;
        text-align:center;
        top: 5%;
        width: 200px;
        background-color:black;
        border-style:solid;
        border-width:1px;
        border-color:orange;
        font-size:250%; }
<html> 
<style>



</style>





<div class="page">
        <div class="centerA">
            <div class="center">
                <h1> This is a test page
                </h1>
            </div>
        </div>
</div>


</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...