Html CSS-我可以'；t使我的菜单动态居中（水平）_Html_Css

Html CSS-我可以'；t使我的菜单动态居中（水平）

html css

Html CSS-我可以'；t使我的菜单动态居中（水平）,html,css,Html,Css,我有这样一个简单的布局： <html> <body> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li&g

我有这样一个简单的布局：

<html>
    <body>
        <div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
           </ul>
      </div>
  </body>

但我不知道如何水平和动态地将菜单居中。CSS在这里。我想这和

文本对齐来居中（非浮动）内联块子项：
ul{
文本对齐：居中；
}
李{
显示：内联块；
浮动：无；/*默认值*/
}


*{
保证金：0；
}
李：第一个孩子{
边界半径：5px 0 5px；
}
李：最后一个孩子{
边界半径：0 5px 5px 0；
}
保险商实验室{
文本对齐：居中；
列表样式：无；
填充：0；
}
a{
颜色：白色；
文字装饰：无；
字体大小：5vmin；
}
李{
显示：内联块；
背景色：#98bf21；
填充：5px20px；
}
李：悬停{
背景色：#7A991A；
}





使用显示：表格
ul{
  display: table;
  list-style: none;
  padding:0;
  margin:0 auto;
}

工作示例：
另外，无关：我建议给你的锚显示：块，所以他们使用整个li空间。现在你必须找到li中的文本才能真正点击链接。
我在这里看不到代码笔的剪贴画，所以我自己做了小提琴。我不确定你想要的是水平还是垂直，所以我都做了
div#one { width: 100%; overflow: hidden; }
div#one ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#one ul li { position: relative; float: left; display: block; right: 50%; margin-right: 20px; }


div#two { width: 100%; overflow: hidden; }
div#two ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#two ul li { position: relative; display: block; right: 50%; text-align: center; }

这将在标记上激发：
<div id="one">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
       </ul>
  </div>

<div id="two">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">A REALLY LONG TITLE</a></li>
       </ul>
  </div>















演示：
请确保您使用的是严格的DTD，因为这些概念中的某些概念在仅声明
的情况下无法跨浏览器工作。
感谢您的提示，我们一定会使用它。很抱歉回复太晚，上网有问题，我有一个新的代码，我似乎无法消除我链接下的这个小缺口，我无法解决问题。谢谢，我要用这个。我现在有了一个新的代码，我的链接下有一个小缺口，我似乎无法摆脱的问题。那么我该如何摆脱它呢？您可以设置标题的高度以匹配链接的高度。“height:63px；”对我有效。@user4215649这是因为内联块元素在默认情况下具有垂直对齐：基线
。例如，您可以使用垂直对齐：中间
来修复该问题。