登录
当前位置： 首页 > 知识库问答 >
问题：

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

吕俊美
2023-03-14

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

我尝试了很多关于响应图像框的教程（例如，连续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个答案

益绯辞
2023-03-14

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

示例：

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

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

简嘉赐
2023-03-14

看来您需要为.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

 类似资料：
  • WordPressget_the_category（）正在返回我不想要的东西

    Wordpress的

  • 我需要帮助上传一些东西到世博会

    我想创建我自己的播客应用程序。 我在网上找到了这段预先编写的代码（），并想对其进行调整，以便创建我自己的应用程序。 如何将此代码上载到expo？

  • 我不确定为什么换行符不影响打印的内容[复制]

    我正在写一个简单的程序来记录我的油耗。我试图弄明白为什么换行符没有输出到文件中，而其他字段是。 我的文件的输出结果如下所示，例如： 行程里程：270.67成本：33.76加仑使用量：11.567 我要查找的文件的预期输出是： 行程里程：270.67 成本：33.76 加仑消耗：11.567

  • Mac上的Python很烂，请帮我卸载不需要的东西

    问题内容： 我无法在shell中的python 2.7中导入numpy。我先安装python ，然后再安装numpy 。我尝试了没有，但出现了拒绝权限错误。无论如何，我得到这个： 在我有以下内容： 和： 的输出是 问题答案： 至于解决方法，请尝试将Python降级为2.7.9，例如： 通过覆盖现有版本，似乎在2.7.10中存在一些特定问题。然后再次重新链接（如果需要）。 还要确保您的设置正确（不要

  • 如何仅在主页上获取某些文章的完整文章内容。vs

    我想知道是否有一种方法可以选择某个帖子是否可以在wordpress的主页上显示完整的内容或只是摘录。在我的content.php我改变了PHPthe_excerpt（）； PHPthe_content（）；但这显示了我所有的特色图像和画廊的第一张照片，这不是我想发生的，所以我不得不改变它回来。我做了一个链接转储，但希望首页上的外部链接更容易访问。我已经附加了一个链接来显示我想在主页上显示的帖子和其

  • JSON API插件for wordpress不返回正确的东西

    我用静态html为我的网站创建了一个移动应用程序，现在我想使用ajax来获取我的帖子、页面、标题、图像等..从我的wordpress原始网站。 为此，我认为最好的解决方案是使用JSON API插件- 我已经安装了，它在页面中运行良好，除了主页，它没有为我的移动应用程序发送正确的想法。 有人知道问题是什么吗？这是我的wordpress网站的问题还是插件问题？ 它在发送这个: 如果你观察，它是返回一个

相关问答

JSON API插件for wordpress不返回正确的东西我不能理解曼德布罗特分形代码的一些东西Python Selenium挂在某些页面上页面容器未居中,页面对齐居中问题PHP cURL不能正确设置内容长度

相关文章

junit：forkMode =“ once”对测试正确性的影响Docker / LXC容器是正在运行的应用程序还是内存中的东西？如何仅从HTML页面提取主要文本内容？如何居中div的内容居中[重复]CSS：不向某些元素添加内容后

相关阅读

某东HR面西山居 测开面经西山居 测开 一面西山居二面凉经被京东面试官🕊了两次

相关工具

我要上Google东月地区选择插件类似 “花瓣” 主页的抽屉效果室内地图演示版v1.0耀西之门

相关文档

如何正确的学习 Node.jsApp Store 上线的那些事儿React Bits 你需要了解的知识点那些年我们一起学 XSS每个程序员都应该了解的内存知识
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.