css - 无法在 html 中居中我的页脚

Question

我目前正在使用此 css 表来设计我的页面，但无论我做什么，我都无法让页脚与我网页的主要内容对齐。这似乎是一个中心化的问题。 这是我的 CSS:

    .footnav
        {

            padding: 20px 40px 20px 40px; 

            clear:both;
            text-align:center;
            color:white;

            position:relative;
            z-index:100;
        }

        .footnav    li a{
        text-decoration:none;
        display: inline;
        font-weight:bold;

        }

        .footnav li {
        list-style-type: none;


        }

这是之前的css样式化的代码，如果阅读量太大，我深表歉意。

<div class="footnav" >
    <ul class="nav1">
        <li class="header">Main</li>
        <li><Home</li>

    </ul>
    <ul class="nav2">
        <li class="header">Aventure</li>
        <li>News</li>
        <li>Map</li>
    </ul >
    <ul class="nav3">
        <li class="header">Survival</li>
        <li>Guide</li>
        <li>Gear</li>

    </ul>
</div>

这是内容区域的 css，我正试图用它来排列我的页脚。

.content
        {
            color:white;
            font-size:12px;
            font-weight:none;
            font-family:sans-serif;
            padding:30px;

            margin:auto;
            margin-top:10px;

            width:70%;
            position:relative;
            z-index:14;

            opacity:1;
            border-style:solid;
            border-width:10px;
            border-style:solid;
            border-width:5px;
            background-color:#000000;
            border-color:#FFFFFF;
            border-right-color:#999999;
            border-left-color:#666666;
            border-bottom-color:#333333;
        }

我知道这涉及尝试占用网页正文宽度的一半，但对于我的页面，我使用的是百分比而不是像素。我不确定如何处理。在此先感谢，对于这个冗长的问题，我深表歉意，但正确帮助我的唯一方法是了解全貌。如果需要更多 Material ，请询问。

Answer 1

将页脚内容包裹在<center>中标签 </center> .它们会自动将任何子内容与页面中心对齐。