时间戳

首页 > 解决方案 > 将 2 个内联列垂直放置在背景中间

css - 将 2 个内联列垂直放置在背景中间

问题描述

您可以手动帮助我使用 UIkit 或 css！我正在使用 UIkit 框架，问题是我真的不明白如何在背景中间（垂直）放置两个内联列！这是我的截图，我想你会明白我的问题![在此处输入图像描述] 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 内！

标签： cssflexboxgriduikit

解决方案

您可以使用以下解决方案将两个内联列垂直放置在背景中间：

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

推荐阅读