Html 将页脚列表居中并使其元素宽度相同_Html_Css

Html 将页脚列表居中并使其元素宽度相同

html css

Html 将页脚列表居中并使其元素宽度相同,html,css,Html,Css,我一直在编写一些代码，但是css对我来说真的很傲慢，它不允许我使我的圆圈列表项具有相同的宽度和高度：（另外，当我创建页脚时，我的列表不会在页面的中心，而是粘在左边代码如下： <html lang="en"> <head> <title>PAGE | Home</title> <link rel="stylesheet" href="css/layout.css" /> <link rel="stylesh

我一直在编写一些代码，但是css对我来说真的很傲慢，它不允许我使我的圆圈列表项具有相同的宽度和高度：（另外，当我创建页脚时，我的列表不会在页面的中心，而是粘在左边

代码如下：

<html lang="en">
<head>
    <title>PAGE | Home</title>
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/page.css" />
    <link rel="stylesheet" href="css/main.css" />
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <img class="logo" src="img/logo.png" />
        </div>
        <div class="footer">
            <ul>
                <li><a>0</a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3/a></li>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>6</a></li>
                <li><a>7</a></li>
            </ul>
        </div>
    </div>

    <script src="js/jquery.js" type="text/javascript"></script>
</body>

以下是一个屏幕截图：

如果有人能帮我解决这个问题，我们将不胜感激

~rkshah

设置页脚的

文本对齐：居中
居中菜单项：
.footer ul {
margin: 0;
padding: 0;
display: inline;
text-align:center;  /* added */
}

在页脚菜单中将display:block
设置为
，以自定义宽度：
.footer ul li a {
width: 200px;
height: 100px;
border-radius: 50%;
color: white;
background-color: #3061a3;
padding: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0 8px;
display:block;  /* added */
}

就这么简单：
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation_center ul li { display: inline; }

#navigation_center ul li a
{
    font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    text-decoration: none;
    padding: .2em 1em;
    color: #DDD;
    background-color: #0099CF;
    border-radius: 4px;
}

#navigation_center ul li a:hover
{
    color: #FFF;
    background-color: #00BEF9;
}

HTML
   <div id="navigation_center">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>








要对齐中间的内容，请对页脚类使用宽度：90%；边距：0 auto。感谢它现在居中，我只需要解决它们大小不尽相同的问题：（它们现在大小都相同，但是它们都是垂直对齐的，而不是水平对齐的
   <div id="navigation_center">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>