我的主要内容受到页面上某些内容的影响，无法正确居中答案

【问题标题】：My main content is being affected by something on the page, won't center properly我的主要内容受到页面上某些内容的影响，无法正确居中
【发布时间】：2021-06-28 13:38:57
【问题描述】：

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

我尝试遵循许多关于响应式图像框的教程（即连续 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

【问题讨论】：

标签： html css text center

【解决方案1】：

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

示例：

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

您可以通过以下链接获取有关如何使用此属性的更多信息：All About Floats | CSS Tricks

【讨论】：

这也有效，因为我的知识非常有限，我不能说我应该使用哪个，不应该使用哪个，但你的回答确实让我认为这就是为什么其他教程我试图跟随并没有像他们应该的那样工作。非常感谢，今天我了解到 StackOverflow 非常有用，在这里提出问题实际上得到了回答，我想我必须从第 1 步开始整个页面。谢谢！

【解决方案2】：

似乎您需要将 100% 的宽度添加到 .box-area 以使其居中。

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

这是我用来玩的一个 codepen： https://codepen.io/josiemedel/pen/XWpMbpw

【讨论】：

非常感谢，我已经投了赞成票，但直到我 15 个 stackoverflow“年”或更长时间才能看到投票！当我尝试在空白 HTML 上执行此操作时，它在没有宽度的情况下工作，你知道为什么吗？
我猜这是因为大多数浏览器都显示默认为 display:block?来源 W3Schools