私は現在、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; }
各アイテムに、それに応じてシフトします