0

我目前正在 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>

任何帮助使 li 中的元素居中，将不胜感激。

编辑：我相信我已经解决了我的问题，通过添加 #mediaItem{ position:absolute; 顶部：597px；左：579px；}

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

4

2 回答 2

0

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

li.listWrap{
    vertical-align: middle;
    height:161px;
    line-height: 161px;
}
于 2013-06-26T14:21:14.060 回答
0

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

li.listWrap{
    text-align:center;
}

但是，如果您也想垂直对齐子项......好吧，不幸的是，它会改变列表项周围的一些间距，但这在技术上可以满足您的需求：

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

我希望这对你有所帮助。祝你好运！

于 2013-06-26T14:32:27.630 回答