我的主要内容被页面上的某些东西影响了，不能正确地居中

提问者：小点点

我的主要内容被页面上的某些东西影响了，不能正确地居中

在一个非常好的虽然是基本的教程之后，我的内容（页眉和页脚之间的文本）不会居中。

我尝试了很多关于响应图像框的教程（例如，连续3个，当调整到移动时，当你向下滚动时，它应该是1个1个），但我失败得很惨。直到现在，一切都很顺利，我感觉有更大的东西正在影响我的整个页面，我肯定这是很简单的很多人，但我哑然。

提前感谢任何能帮上忙的人，这简直要了我的命。

这是我的HTML（我正在为整个站点使用Dreamweaver模板，但这不是模板文件，只是从模板创建的HTML）。

<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- InstanceBeginEditable name="doctitle" -->
        <title>Holiday Rentals</title>
    <!-- InstanceEndEditable -->

    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    
</head>

<body>

    
    <!-- Navigation Bar -->
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <label class="logo">MALLORCA<span>NOW</span></label>
        <ul>
            <li><a class="active"href="#">Home</a></li>
            <li><a href="#">Holiday Rentals</a></li>
            <li><a href="#">For Sale</a></li>
        </ul>
    </nav>
    <!-- End Navigation Bar -->
    
    
    <!-- Main Content -->
    <!-- InstanceBeginEditable name="main-content" -->  
    <div class="main-content">
        <div class="box-area">
            <div class="single-box">
                <div class="img-area"></div>
                <div class="img-text">
                    <span class="header-text">Azalea</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
                </div>   
            </div>
            <div class="single-box">
                <div class="img-area"></div>
                <div class="img-text">
                    <span class="header-text">Canguila</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
                </div>   
            </div>
            <div class="single-box">
                <div class="img-area"></div>
                <div class="img-text">
                    <span class="header-text">Iris</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
                </div>   
            </div>
        </div>
    
    </div>
        

    


    
    <!-- InstanceEndEditable -->
    <!-- End Main Content -->
    
    <!-- Footer -->
    <footer>
        <div class="footer-main-content">
            <div class="left box">
                <h2>About Us</h2>
                <div class="footer-content">
                    <p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
                    <div class="social">
                        <a href="#"><span class="fab fa-facebook-f"></span></a>
                        <a href="#"><span class="fab fa-twitter"></span></a>
                        <a href="#"><span class="fab fa-instagram"></span></a>
                        <a href="#"><span class="fab fa-youtube"></span></a>
                    </div>
                </div>
            </div>
            
            <div class="center box">
                <h2>Address</h2>
                <div class="footer-content">
                    <div class="place">
                        <span class="fas fa-map-marker-alt"></span>
                        <span class="text">Cala Bona, Mallorca</span>
                    </div>
                    <div class="phone">
                        <span class="fas fa-phone-alt"></span>
                        <span class="text">+34-676841886</span>
                    </div>
                    <div class="email">
                        <span class="fas fa-envelope"></span>
                        <span class="text">office@mallorca-now.com</span>
                    </div>
                </div>
            </div>
            
            <div class="right box">
                <h2>Contact Us</h2>
                <div class="footer-content">
                 <form action="#">
                    <div class="email">
                        <div class="text">Email *</div>
                        <input type="email" required>
                    </div>
                    <div class="msg">
                        <div class="text">Message *</div>
                        <textarea rows="2" cols="25" required></textarea> 
                    </div>
                    <div class="btn">
                        <button type="submit">Send</button>
                    </div>
                 </form>
                </div>
            </div>
        </div>
        <div class="bottom">
            <center>
                <span class="credit">Est. 2012 -<a href="#"> Mallorca-Now</a></span>
                <span class="far fa-copyright"></span><span> - All Rights Reserved</span>
            </center>
        
        </div>
    </footer>
    
    <!-- End Footer -->
   
</body>
<!-- InstanceEnd --></html>

和我的CSS,最后一个样式是预期的“中心”,但正如我已经说过的,我一直有其他问题添加内容到我的站点的中间部分。

/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */

*{
    padding:0;
    margin:0;
    text-decoration:none;
    list-style:none;
    box-sizing:border-box;
    font-family: 'Montserrat', sans-serif;
}



/* Navbar */
nav{
    background-color:#101010;
    height:80px;
    width:100%;
    position:sticky;
    top:0;
}

label.logo{
    color:white;
    font-size:35px;
    font-weight:100;
    line-height:80px;
    padding:0 100px;
}

label.logo span{
    font-weight:900;
}

nav ul{
    float:right;
    margin-right:20px;
}

nav ul li{
    display:inline-block;
    line-height:80px;
    margin:0 5px;
}
    
nav ul li a{
    color:white;
    font-size:17px;
    padding:7px 13px;   
}

nav ul li a.active,nav ul li a:hover{
    background:#6DD5FA;
    transition:0.9s;
    border-radius:4px;
}

.checkbtn{
    font-size:30px;
    color:white;
    float:right;
    line-height:80px;
    margin-right:40px;
    cursor:pointer;
    display:none;
}

#check{
    display:none;
}

@media (max-width: 952px){
    label.logo{
        font-size:30px;
        padding-left:50px;
    }
    nav ul li a{
        font-size:16px;
    }
}
@media (max-width:858px){
    .checkbtn{
        display:block;
    }
    ul{
        position:fixed;
        width:100%;
        height:100vh;
         background-color: #6DD5FA; /* For browsers that do not support gradients */
        background-image: linear-gradient(to bottom             right, #2980B9, #6DD5FA, #FFFFFF);
        top:80px;
        left:-100%;
        text-align:center;
        transition:all .9s;
    }
    nav ul li{
        display:block;
        margin:50px;
        line-height:30px;
        
    }
    nav ul li a{
        font-size:20px;
    }
    a:hover,a.active{
        background:none;
        color:#0082e6;
    }
    
    #check:checked ~ ul{
        left:0;
    }
}



/* Main Content */

.main-content{
    
    min-height:;
    background-color: #6DD5FA; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);      
}

.cards{
    max-width:1300px;
    margin:0 auto;
    text-align:center;
    padding:30px;
}

.services{
    display:flex;
    align-items:center;
}

.cardscontent{
    display:flex;
    flex-wrap:wrap;
    flex:1;
    margin:20px;
    padding:20px;
    border:2px solid black;
    border-radius:4px;
    transition: all 0.9s ease;
}

.cardscontent .fab{
    font-size:70px;
    margin:16px 0;
}

.cardscontent .fas{
    font-size:70px;
    margin:16px 0;
}

.cardscontent > *{
    flex: 1 1 100%;
}

.cardscontent:hover{
    color:white;
}

.cardscontent:hover a{
    border-color:white;
    background:white;
    color:black;
}

.c-content1:hover{
    border-color:#BCED91;
    background:#BCED91;
}

.c-content2:hover{
    border-color:#FFC30B;
    background:#FFC30B;
}

.c-content3:hover{
    border-color:#D70040;
    background:#D70040;
}
    

.cardscontent h2{
    font-size:30px;
    margin:16px 0;
    letter-spacing:1px;
}

.cardscontent p{
    font-size:17px;
}

.cardscontent a{
    margin:22px;
    background:black;
    color:white;
    text-decoration:none;
    border:1px solid black;
    padding:15px 0;
    border-radius:25px;
    transition:.9s ease;
}

.cardscontent a:hover{
    border-radius:4px;
}

@media (max-width:900px){
    .services{
        display:flex;
        flex-direction:column;
    }
}






/* Footer */

footer{
    position:relative;
    bottom:0;
    width:100%;
    background-color:#101010;
    color:white;
}

.footer-main-content{
    display:flex;   
}

.footer-main-content .box{
    flex-basis:50%;
    padding:10px 20px;
}

.box h2{
    font-size:1.125rem;
    font-weight:600;
    text-transform:uppercase;
}

.box .footer-content{
    margin:20px 0 0 0;
    position:relative;
}

.box .footer-content:before{
    position:absolute;
    content:'';
    top:-10px;
    height:2px;
    width:100%;
    background:#1a1a1a;
}

.box .footer-content:after{
    position:absolute;
    content:'';
    height:2px;
    width:15%;
    background:#6DD5FA;
    top:-10px;
}

.left .footer-content{
    text-align:justify;
}

.left .footer-content .social{
    margin:20px 0 0 0;
}

.left .footer-content .social a{
    padding: 0 2px;
}

.left .footer-content .social a span{
    height:40px;
    width:40px;
    background:#1a1a1a;
    line-height:40px;
    text-align:center;
    font-size:18px;
    border-radius:5px;
    color:white;
}

.left .footer-content .social a span:hover{
    background:#6DD5FA;
    transition:0.9s;
    
}

.center .footer-content .fas{
    font-size:1.4375rem;
    background:#1a1a1a;
    height:45px;
    width:45px;
    line-height:45px;
    text-align:center;
    border-radius:50%;
    transition:0.9s;
    cursor:pointer;
}

.center .footer-content .fas:hover{
    background:#6DD5FA;
}

.center .footer-content .text{
    font-size:1.0625rem;
    font-weight:500;
    padding-left:10px;
}

.center .footer-content .phone{
    margin:10px 0;
}

.right form .text{
    font-size:1.0625rem;
    margin-bottom:2px;
    color:#656565;
}

.right form .msg{
    margin-top:10px;
}

.right form input, .right form textarea{
    width:100%;
    font-size:1.0625rem;
    background:#151515;
    padding-left:10px;
    border:1px solid #222222;
    color:white;
}

.right form input:focus, 
.right form textarea:focus{
    outline-color:#3498db;
}

.right form input{
    height:32px;
}

.right form .btn{
    margin-top:10px;
}

.right form .btn button{
    height:40px;
    width:100%;
    border:none;
    outline:none;
    background: #6DD5FA;
    font-size:1.0625rem;
    font-weight:500;
    cursor:pointer;
    transition:0.3s;
    color:white;
}

.right form .btn button:hover{
    background:#000;
}

.bottom center{
    padding:5px;
    font-size:0.9375rem;
    background:#151515;
}

.bottom center span{
    color:#656565;
}

.bottom center span a{
    color:white;
}

@media screen and (max-width:900px){
    footer{
        position:relative;
        bottom:0px;
    }
    
    .footer-main-content{
        flex-wrap:wrap;
        flex-direction:column;
    }
    
    .footer-main-content .box{
        margin:5px 0;
    }
}


.box-area{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
} ```

The .box-area should center the content, as I have tried it out in a blank HTML page and it does. I am truly lost. Thanks to anyone that can help, and If I havent provided enough information I am sorry, tell me what you need and I will.

Mark Monaghan

共2个答案

匿名用户

看来您需要为.box-area添加100%的宽度才能使其居中。

    .box-area{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    /*Added width to the area and it centered*/
     width: 100%;
}

下面是我使用它时使用的代码：https://codepen.io/josiemedel/pen/xwpmbpw

匿名用户

基本上，发生这种情况的原因是您正在用float定位导航栏的元素。使用浮点的一个更令人困惑的问题是，它们如何影响包含它们的元素（它们的“父”元素）。若要解决此问题，请将溢出属性设置为在NAV中隐藏。

示例：

nav{
  background-color:#101010;
  height:80px;
  width:100%;
  position:sticky;
  top:0;
  overflow:hidden;
}

您可以通过以下链接获得关于如何使用此属性的更多信息：关于浮点CSS技巧的所有信息