Html 在给定ul、li范围内将项目居中

我目前正在Joomla建立一个网站，遇到了一些障碍。我已经为我的li元素设置了一个背景图像，但是li中的所有项目只是按原样放置，而不是在给定元素中居中。 这是我正在工作的网站，我所指的列表是视频/音频播放器/博客/媒体（www.unlawsofhealth.com）

{youtube}JgN0kqSPL4E&list=PLpJKmZyu1fjM-CzQOB_或qzzlyizueutc&index=1{/youtube}

我现在使用的css

<style type="text/css">
#listWrap{
float:left;
width:100%;
height:100%;
display:inline;
padding-bottom:45px;
margin-left:auto;
margin-right:auto;
}
#modAudio{
width:225px;
}
ul.mediaWrap{
display:inline;
}
li.listWrap{
background-image:url('images/mediaMod/mediaBG.png');
display:inline-block;
vertical-align:top;
height:161px;
width:258px;
}
ul.listWrap li.listWrap{
list-style:none;
width:225px;
}
#youtubeAlign{
margin-left:auto;
margin-right:auto;
}
#mediaItem{

}
</style>

#保鲜膜{
浮动：左；
宽度：100%；
身高：100%；
显示：内联；
填充底部：45px；
左边距：自动；
右边距：自动；
}
#modAudio{
宽度：225px；
}
ul.mediaWrap{
显示：内联；
}
李。李斯特瑞普{
背景图片：url（'images/mediaMod/mediaBG.png'）；
显示：内联块；
垂直对齐：顶部；
高度：161px；
宽度：258px；
}
ul.listWrap li.listWrap{
列表样式：无；
宽度：225px；
}
#YouTubealing{
左边距：自动；
右边距：自动；
}
#mediaItem{
}

如果您能在li内提供任何帮助，我们将不胜感激

编辑：我相信我已经通过添加 #mediaItem{ 位置：绝对位置； 顶部：597px； 左：579px； }

---

对于每个项目，它会相应地移动它们

如果您试图垂直居中内容，请尝试：

li.listWrap{
    vertical-align: middle;
    height:161px;
    line-height: 161px;
}

---

如果您希望子项与中心水平对齐，可以尝试以下CSS：

li.listWrap{
    text-align:center;
}

但是，如果您也要垂直对齐子项…很遗憾，它会更改列表项周围的一些间距，但从技术上讲，这会满足您的需要：

li.listWrap{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

---

我希望这能帮你一点忙。祝你好运

我试图将Li的内容集中在它的元素中。因此UL处于适当的位置，是LI中的项目需要它。（它们当前对齐到顶部），所以您希望每个<代码> LI<代码>中的条目垂直排列在中间？左对齐（左对齐）？我想我得到了它，必须添加一个自定义类，并对其应用一个position:absolute。您可能不需要绝对定位。请参阅更新的答案。您可能希望查看显示：块或表格单元格、高度：1em或适合您内容的任何内容，以及边距：自动0（浏览器将处理自动边距以填充垂直空间）您正在使用相同id

\mediaItem

两次。Id在页面上应该是唯一的。

li.listWrap{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}