jq下划线跟随导航案例，解答下导航不能居中问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq8</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
*{padding: 0;margin: 0;}
ul{ list-style: none;z-index: 20; font-size: 15px;
position: relative; }
li{float: left; cursor: pointer; width: 100px;height: 30px;color:pink;background: blue; border-radius:3px; text-align: center;line-height: 30px ;font-weight: bold;}
.menu{width: 400px;position: relative; height: 32px; background: pink; border-radius: 3px; box-shadow: 0 2px 20px #000;
/*加居中下划线不能跟随？margin: 0px auto;*/}
/*jq下划线跟随导航案例，随便解答下问题
先获取li标签的值， 用parseInt取整，向左增加x像素
使用stop()停止动画效果，当向左位移到x位置时停止*/
</style>
<script>
$(function(){
$('li').hover(function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},200)
},
function(){
$('.block').stop().animate({left:'0px'},200)
}
)
})
</script>
</head>
<body>
<script>
</script>
<div>
<ul>
<li name="0">首页</li>
<li name="1">夫是德国</li>
<li name="2">给对方</li>
<li name="3">各个地方</li>
</ul>
</div>
<div style="z-index: 10;width:100px;height: 2px;background: red;top: 30px; position: absolute; "></div>
</body>
</html>先获取li标签的值， 用parseInt取整，向左增加x像素，当向左位移到x位置时停止，使用stop()停止动画效果。有个问题：老师视频案例中是下划线能跟着导航默认居中的，我要怎么样才能实现这个效果？我现在交的案例是不居中的，如图
![E9TNE)W~BD}]X5TK(WDN53V.png](http://img.php.cn//upload/image/384/430/292/1541783633792043.png "1541783633792043.png")