поместите 2 встроенных столбца вертикально в середину фона - PullRequest
Новая
       13

поместите 2 встроенных столбца вертикально в середину фона

0 голосов
/ 26 сентября 2018

Вы можете помочь мне с UIkit или CSS вручную!Я использую UIkit Framework, и проблема в том, что я действительно не понимаю, как разместить два встроенных столбца в середине фона (по вертикали)!вот скриншот, что у меня есть, я думаю, тогда вы поймете мою проблему ![enter image description here] 1

это код этого раздела с колонками: 

<section id="header" class="gradient bg bg-gradient ">

    <div uk-grid style="margin: 0 auto;" class="uk-flex uk-flex-middle uk-flex-space-between uk-grid-item-match">
        <div class="uk-width-3-5@m">
            <div class="uk-flex-inline">
                <hr class="uk-divider-small">
                <p>DISTRIBUTED LEDGER TECHNOLOGY</p>
            </div>
            <p>
            <h1><span style="color: #6d6d6d">BRINGING</span> <span style="color: white">A GOLD STANDART TO THE</span>
                <span style="color: rgba(4,149,247,1);">BLOCKCHAIN</span></h1></p>

        </div>
        <div class="uk-width-expand@m uk-flex">
            <video loop muted playsinline uk-video="autoplay: inview">
                <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
                <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
            </video>
        </div>
    </div>

</section>

вот мой main.css 

.gradient {
    height: 900px;
    width: 100%;
    background: linear-gradient(180deg, #092436 0%, rgba(13, 17, 22, 0) 100%);
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}

.bg {
    height: 900px;
    width: 100%;
    background-color: #0D1116;
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}

.bg-gradient{
    position:absolute;
    top:0px;
    z-index: -1;
}

.thin-text{
    font-weight: 200;
}

html,body{
    letter-spacing: 2px;
}

.uk-button-text {
    letter-spacing: 2px;
    padding:5px;
}

.uk-navbar{
    border-bottom: 1px solid rgba(4,149,247,0.1);
}

.hover{
    transition: 0.3s;
}

.hover:hover{
    background-color: rgba(4,149,247,0.1);
}

.padding-header {
    padding: 200px 100px 100px 100px;
}

мои 2 столбца находятся внутри .bg и .gradient!

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018 
<section id="header" class="gradient bg bg-gradient uk-flex">
    <div class="uk-margin-auto uk-margin-auto-vertical">
        <div uk-grid>
        </div>
    </div>
</section>
0 голосов
/ 26 сентября 2018

Вы можете использовать следующее решение, чтобы поместить два встроенных столбца вертикально в середину фона: 

.uk-width-expand@m {
    margin: 0 auto;
}
...