Question

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

<div id="listWrap">
<ul class="mediaWrap">
     <li class="listWrap">  
<!-- youtube player -->
 {youtube}JgN0kqSPL4E&list=PLpJKmZyu1fjM-CzQOB_OrqzZLyIZUeutC&index=1{/youtube}
    </li>
      <li class="listWrap"><!-- audio -->  
            <?php  
                    $show_podcasts=1; 
                    include("podcast/demo/audioMod.php");
           ?>
      </li>

   <li class="listWrap" id="size"> <!-- blog -->       
           <a href="http://www.outlawsofhealth.com/index.php/outlaw-fitness-blog">     <img  id="mediaItem" src="images/mediaMod/blogImg.png" width="225px" /></a>
    </li>
        <li class="listWrap"> <!-- featured mediua -->          
<!-- <a href="http://localhost/outlaws/index.php/featured-media"></a> this link left intentionally broken as section is blank -->
                <img id="mediaItem" class="img-rounded" src="images/mediaMod/mediaImg.png" height="" width="225px">
        </li>
  </ul>

</div>

和我正在使用的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>

任何帮助将李中的元素集中在一起的帮助，将不胜感激。

编辑：我相信我通过添加修复了我的问题 #mediaItem { 位置：绝对的; 上图：597px; 左：579px; }

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

Answer 1

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

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

Answer 2

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

li.listWrap{
    text-align:center;
}

但是，如果你想垂直对齐孩子......好吧，不幸的是，它改变了列表项周围的一些空格，但这在技术上给你你想要的东西：

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

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

将项目置于给定的ul，li中

2 个答案: