怎么让这个导航栏横向居中排列，现在是竖向排列的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}

ul{
width: 50px;
height: 80px;
display: inline;
}

li{
line-height: 20px;
width: 70px;
height: 20px;
border: 2px solid gray;
padding: 0 30px
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>学校概况</li>
<li>管理机构</li>
<li>系部设置</li>
<li>教育教学</li>
<li>科学研究</li>
<li>招生就业</li>
<li>学生工作</li>
<li>党建思政</li>
<li>团学动态</li>
<li>团干培训</li>
<li>数字校园</li>
<li>RSS</li>
</ul>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
$("ul li").mouseover(function(){
$(this).css({backgroundColor:"red"})
})
$("ul li").mouseout(function(){
$(this).css({backgroundColor:""})
})
</script>
</html>

是这样吗

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        ul {
            /* width=13*70 */
            width: 910px; 
            height: 80px;
            display: flex;
            margin: 0 auto;
        }

        li {
            line-height: 20px;
            width: 70px;
            height: 20px;
            border: 2px solid gray;
            text-align: center;
        }
    </style>
</head>

<body>
    <ul>
        <li>首页</li>
        <li>学校概况</li>
        <li>管理机构</li>
        <li>系部设置</li>
        <li>教育教学</li>
        <li>科学研究</li>
        <li>招生就业</li>
        <li>学生工作</li>
        <li>党建思政</li>
        <li>团学动态</li>
        <li>团干培训</li>
        <li>数字校园</li>
        <li>RSS</li>
    </ul>
</body>
<!-- <script src="js/jquery-1.8.3.js"></script> -->
<script>
    // $("ul li").mouseover(function(){
    //     $(this).css({backgroundColor:"red"})
    // })
    // $("ul li").mouseout(function(){
    //     $(this).css({backgroundColor:""})
    // })
</script>

</html>

ul{
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

ul标签增加

margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;

建议li标签width改为min-width

给ul加一个div框，设置margin：0 auto；

body,ul,li{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}

ul{
margin:0 auto;
width: 962px;
height: 30px;

}

li{
text-align: center;
line-height: 30px;float:left;
width: 70px;
height: 30px;
border: 2px solid gray;
padding: 0px
}

内边距太大，一行显示不开