首页html中列表一级水平居中，二级垂直

html中列表一级水平居中，二级垂直

时间: 2024-09-06 21:08:02 浏览: 27

在HTML中，如果你想要创建一个列表，其中一级标题（例如`<ul>`元素下的`<li>`）水平居中，而二级标题（通常是嵌套在`<ol>`或`<ul>`内的`<li>`）垂直居中，可以使用CSS来实现。这里有一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* 一级列表样式 */ ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; /* 水平居中 */ } ul li { background-color: #eee; /* 可视化每个项目 */ } /* 二级列表样式 */ ul li ul { margin: 0; padding-left: 40px; /* 补偿第一个子项的左外边距 */ display: flex; flex-direction: column; /* 让子项垂直排列 */ align-items: center; /* 子项垂直居中 */ } </style> </head> <body> <ul> <li>一级标题 1 <ul> <li>二级标题 1a</li> <li>二级标题 1b</li> </ul> </li> <li>一级标题 2 <ul> <li>二级标题 2a</li> <li>二级标题 2b</li> </ul> </li> </ul> </body> </html> ``` 在这个例子中，一级列表通过`display: flex`和`justify-content: center`实现了水平居中，而二级列表则设置了`flex-direction: column`和`align-items: center`来实现垂直居中。