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

子アイテムを中央に水平に揃えたい場合は、次の CSS を試すことができます。

li.listWrap{
    text-align:center;
}

ただし、子も垂直方向に配置したい場合は...残念ながら、リスト項目の周りのスペースの一部が変更されますが、これにより技術的に必要なものが得られます。

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

これが少しお役に立てば幸いです。幸運を！

于 2013-06-26T14:32:27.630 に答える
0

コンテンツを垂直方向の中央に配置しようとしている場合は、次を試してください。

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