I'm currently facing an issue while building a Joomla site. I have set a background image for my li elements, but the items within the li are not centered as expected.
The website I am working on is www.outlawsofhealth.com. The specific list in question includes a video/audio player, blog, and media content.
<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 -->
<img id="mediaItem" class="img-rounded" src="images/mediaMod/mediaImg.png" height="" width="225px">
</li>
</ul>
</div>
Here's the CSS code I'm using:
<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>
Any assistance on how to center the elements within the li would be greatly appreciated.
UPDATE: I managed to resolve the issue by adding #mediaItem{ position:absolute; Top:597px; left:579px; }
This adjustment effectively aligns the elements as needed.