为所有屏幕垂直对齐_大数据知识库

.page-section {
    background-color: #035DA9;
    font-family: "Mulish", sans-serif;
}

.logo-image {
    width: 270px;
    margin: 12px 0px 0px 12px;
}

.header-section {
    display: flex;
}

.navbarLinks {
    color: white;
    margin-top: 40px;
    position: absolute;
    right: 0px;
}

.navbarLinks a {
    text-decoration: none;
    background-color: transparent;
    margin-right: 39px;
    color: white;
}

.middle-section{

    width: 100vw;
    margin-left: -8px;
}

.md-sec-1 {
    background-color: #203546;
    display: flex;
}

.middle-section-image {
    width: 270px;
    background-color: transparent;
    padding: 50px;
}

.text-section {
    color: white;
    margin-top: 20px;
}

.text-section p{
    word-spacing: 5px;
}

.md-sec-2{
    color: white;
    margin-top: auto;
    margin-bottom: auto;
}

.md-sec-2 h3 {
    text-align: center;
}

.footer-section {
    background-color: white;
    height: auto;
    position: absolute;
    width: 100vw;
    bottom: 0px;
    margin-left: 0px;
    display: flex;
}

.btn {
    color: white;
    background: #203546;
    border: 0px;
    border-radius: 4px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* margin-left: 47%; */
    padding: 10px 20px;
    margin-top: 12px;
}

.icons{
    padding: 17px;
    padding-left: 30px;
}

.icons a{
    text-decoration: none;
    background-color: transparent;
    padding: 0px 6px;
}

.color-black {
    color: black;
}

@media only screen and (max-width: 900px){
    .update-contact-section{
        margin-right: 10px !important;
    }
}

@media only screen and (max-width: 800px){
    .update-image{
        display: inherit !important;
        height: auto;
    }

    .navbarLinks a {
        margin-right: 10px;
    }

    .navbarLinks {
        margin-top: 12px;
    }

    .logo-update {
        width: 140px;
        margin-left: 0px;
        margin-top: 0px;
    }

    .image-responsive {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 57%;
    }

    .header-section-update {
        height: 7vh;

    }

    .header-center{
        text-align: center;
        margin-top: -40px;
        /* font-size: 40px; */
    }

    .para-update {
        padding: 0px 10px;
        /* font-size: 30px; */
    }

    .fa-icon-update {
        font-size: 10px;
        padding-left: 0px;
    }

    .footer-text-update {
        font-size: 10px; 
        margin-top: 21px;
    }

    .contact-update {
        font-size: 8px; 
        margin-top: 23px;
    }

    .icons {
        padding-left: 0px;
    }

    .text-section {
        padding-bottom: 20px;
    }
}

@media only screen and (max-width: 400px){
    body{
        font-size: 12px;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Intern guys</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./app.css">
    <script src='./font-awesome.js'></script>
</head>

<body class="page-section">
    <div>
        <div class="header-section header-section-update">
            <div class="logo-section">
                <img src="./images/logo_image.png" alt="logo" class="logo-image logo-update" />
            </div>
            <div class="navbarLinks">
                <a href="https://www.internguys.com/">Home</a>
                <a href="https://www.internguys.com/about">About us</a>
                <a href="https://www.internguys.com/signup">Register</a>
            </div>
        </div>
        <div class="middle-section">
            <div class="md-sec-1 update-image">
                <div class="image-section">
                    <img src="./images/final-mid-image.png" alt="image" class="middle-section-image image-responsive" />
                </div>
                <div class="text-section">
                    <h3 class="header-center">WELOME TO THE INTERN GUYS</h3>
                    <P class="para-update">Congratulations, you have made the first and last step required to get your internship. Start by
                        creating your profile and you are up and ready for the internship.
                        But don't worry everything is automated, we know exactly where are the pain points are and
                        that’s why we promise to make this as smooth as possible.
                        <i>After all, we are the Inten guys</i>.
                    </P>
                </div>
            </div>

            <div class="md-sec-2 btn-update">
                <h3 class="quote-update">We are started by the students, built by the students and for the students</h3>
                <a href="" style="text-decoration: none;"><button class="btn">Start now</button></a>

        </div>
        <div class="footer-section">
            <div class="icons" style="width: 33vw;">
                <a href=""><i class='fab fa-twitter color-black fa-icon-update'></i></a>
                <a href="https://www.instagram.com/internguys/?hl=en"><i class='fab fa-instagram color-black fa-icon-update'></i></a>                
                <a href="https://www.linkedin.com/company/intern-guys/"><i class='fab fa-linkedin color-black fa-icon-update'></i></a>                
                <a href="https://www.tiktok.com/@internguys?"><i class='fab fa-tiktok color-black fa-icon-update'></i></a>            
            </div>
            <div style="width: 33vw;">
                <p style="text-align: center; " class="footer-text-update">Built with love in Irvine</p>
            </div>
            <div style="width: 33vw;">
                <p style="float: right; margin-right: 30px;" class="update-contact-section contact-update">Conatct us: xyz@gmail.com</p>
            </div>
        </div>
    </div>
</body>

</html>

我正在为我的一个项目制作此电子邮件模板。这里我想引用“我们是由学生开始的，由学生建立的……”应该总是出现在中间（垂直），但我无法实现它。就像我在ipad上看到我的页面一样，页脚和引用部分之间有很大的空间。所以基本上，我必须在中间垂直对齐div的内容，但是对于一个可变高度的div，有人能帮我吗？

为所有屏幕垂直对齐

1条答案

相关问题

热门标签

最新问答