Как выровнять по вертикали в пределах 100vh div - PullRequest
Новая
       39

Как выровнять по вертикали в пределах 100vh div

0 голосов
/ 05 августа 2020

Я столкнулся с проблемой, которую безуспешно пытался исправить в течение нескольких часов. Я сразу перейду к проблеме - у меня есть заголовок высотой 100vh, внутри заголовка у меня есть контент, состоящий из текста и значков.

Я без проблем выровнял контент по горизонтали, используя text-align: центр и дисплей: встроенный блок. Контент зависит от ширины.

Но проблема возникает, когда я максимизирую высоту . Как только он выходит за пределы определенной высоты (только потому, что высота содержимого составляет около 500 пикселей, * не потому, что вертикальное выравнивание работает до этой точки. Это основа проблемы, хотя содержимое не выровнено по вертикали ).

1010 * так что, когда я maximaze высоту, мое содержание остается точно так, как это было, когда высота была меньше, и, следовательно, мое содержание не центрирован больше (это было и раньше, но только из-за его собственной высоты).

Я перепробовал все, что нашел в Интернете, но ничего не помогло. Чтобы было понятнее, я пытаюсь центрировать свой контент по вертикали, когда высота родительского div максимизируется.

Я создал div .wrapper-header и попытался центрировать весь контент полностью, но снова потерпел неудачу.

HTML

 <header>  
            <div class="wrapper-header">
                <div class="wrapper-intro">
                    <h6 class="intro">Hi there,</h6>
                </div>
                <div class="wrapper-intro1">
                    <h5 class="intro1">
                        my name is Jelena and I
                    </h5>
                </div>
                <div class="wrapper-intro2">
                    <h3 class="intro-2">
                        make everything possible on the internet.
                    </h3>
                </div>
                <div class="icons-s">
                    <table class="icons-display">
                        <tr>
                            <td class="icons">
                                <img src="icons/science_48.png" alt="science"> <img src="icons/game-controller_48.png" alt="game-cont"> <img src="icons/spaceship_48.png" alt="spaceship">
                            </td>
                        </tr>
                        <tr>
                            <td class="icons1">
                                <img src="icons/space_48.png" alt="space"> <img src="icons/alien_48.png" alt="rocket"> <img src="icons/robot_48.png" alt="png">
                            </td>
                        </tr>
                        <tr>
                            <td class="icons2">
                                <img src="icons/astronaut_48.png" alt="astronaut"> <img src="icons/javascript_48.png" alt="javascript"> <img src="icons/python_48.png" alt="python"> 
                            </td>
                            <tr>
                                <td class="icons3">
                                    <img src="icons/java_48.png" alt="java"> <img src="icons/data_48.png" alt="data">
                                </td>
                            </tr>
                        </tr>
                    </table>
                </div>
                <div class="quote-wrapper">
                    <p class="quote">
                        Learn from the past, explore the present, <b>and invent the future</b>
                    </p>
                </div>
            </div>
        </header>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
}

body,html{
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 300px 300px 230px;
    grid-template-areas:
    "nav"
    "header"
    "author"
    "main"
    "article"
    "section"
    "footer";
}

header{
    height: 100vh;
    grid-area: header;
    background: linear-gradient(to right, #a239ca, #4717f6);
}
.wrapper-header{
}

wrapper-intro{
    text-align: start;
}

.intro{
    margin-left: 5px;
    display: inline-block;
    font-family: 'Source Code Pro', monospace;
    color: #e7dfdd;
    font-size: 20px;
}

.wrapper-intro1{
    text-align: center;
}

.intro1{
    display: inline-block;
    font-family: 'Source Code Pro', monospace;
    color: #e7dfdd;
    font-size: 20px;
}

.wrapper-intro2{
    text-align: center;
}

.intro-2{
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
}

.icons{
    padding-top: 15px;
    padding-bottom: 3px;
}
.icons1{
    padding: 3px;
}

.icons2{
    padding: 3px;
}

.icons3{
    padding: 3px;
}

.icons-s{
    text-align: center;
}

.icons-display{
    display: inline-block;
}

.quote-wrapper{
    text-align: center;
}

.quote{
    font-size: 14px;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    color: #e7dfdd;
    border-top: 1px dashed #e7dfdd;
    width: 70%;
    padding-top: 5px;
    margin-top: 15px;
}

1 Ответ

0 голосов
/ 05 августа 2020

Я немного подправил свой код и обнаружил, что flexbox действительно работает.

Этот блок кода помог мне центрировать мой контент независимо от высоты родительского div: 

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
...