javascript - 垂直对齐所有屏幕

问题描述

.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。谁能帮我解决这个问题

标签： javascriptcssflexbox

javascript - 垂直对齐所有屏幕

问题描述

解决方案

推荐阅读