Jquery 如何对齐<；李>；一个轴上的元素在<；ul>；？

我已经创建了ul元素。以下是我的导航栏的html和css：

Html:

如您所见，所有li元素都与页面顶部对齐。有没有办法把它们对齐

（如果我犯了一些语法错误，很抱歉英语不是我的母语）

试试：

从锚固件中删除浮动，并使用显示：内联块。在图像、li和锚固件中添加了垂直对齐：中间

ul#list-nav {
    margin: auto;
    padding: 0;
    list-style: none;
    width: 525px;
    display: table;
    }

ul#list-nav li {
  display: table-cell;
  vertical-align: bottom;
}

这将使其根据需要在一个轴上对齐：）

它是干什么的

我已将

表格

添加到

ul

中，并将

表格单元格

添加到

li

中。使列表项在同一轴上对齐<代码>垂直对齐：底部用于表示轴

我对你在问题中提到的一个轴有点困惑。如果要在中间显示列表项，请使用

垂直对齐：中间

。因此，这意味着这段代码将帮助您通过更改垂直对齐方式轻松自定义：）

            ul#list-nav {
    margin:auto;
    padding:0;
    list-style:none;
    width:525px;
}
ul#list-nav li {
    display:inline text-align: center;
}
ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:auto;
    color:#eee;
    float:left;
    margin:5px;
}
ul#list-nav li a {
    text-align:center;
    border: 1px solid transparent;
}
ul#list-nav li a:hover {
    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

   ul#list-nav {
        margin:auto;
        padding:0;
        list-style:none;
        width:525px;
        display:block;
    }
    ul#list-nav li {
        display:inline;
       text-align: center;
        vertical-align:middle;
    }
    ul#list-nav li a {
        text-decoration:none;
        padding:5px 0;
        width:auto;
        color:#eee;    
        margin:5px;
        display:inline-block;
        vertical-align:middle;
    }
    ul#list-nav li a img {
        vertical-align:middle;
    }

ul#list-nav {
    margin: auto;
    padding: 0;
    list-style: none;
    width: 525px;
    display: table;
    }

ul#list-nav li {
  display: table-cell;
  vertical-align: bottom;
}