How to properly align an object in a specified ul, li list

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.

Answer №1

To achieve horizontal alignment of child items to the center, consider utilizing the following CSS:

ul.itemList{
    justify-content: center;
    display: flex;
}

For vertical alignment as well, understand that it may alter spacing around the list items. This approach can provide the desired outcome:

ul.itemList{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

We hope these suggestions assist you in reaching your objectives. Best of luck!

Answer №2

For those attempting to vertically center content, consider this solution:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to split a Bootstrap navbar into two separate rows?

I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

Allow JavaScript to determine whether to link to an internal or external web address

Currently, I am in the process of setting up a new website and need to create an HTML page with some JavaScript that can determine whether to link to the external or internal IP address. I have researched some JavaScript code to fetch the IP address, whic ...

Looking to center an image in front of text?

I am looking to position an image in front of text and center it. <div id="info"> <ul> <h3> <li>NAME: Mohit Kumar Singh</li> <li>CONTACT:1234567890</li> <li>ADDE ...

Choose the heading element based on its class

I am trying to target a specific element by its class and store it in a variable, but I specifically need this element to be a heading element. To clarify: at any given time, there are always exactly 3 elements with this particular class on my page: an < ...

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

Is there a way to keep an element fixed on the display without using position: fixed? I want the element to always remain above other elements, so I used z-index. Additionally, I would like the element to be able to move horizontally without scrolling acro ...

Can data be transferred from node.js express to front-end HTML without requiring a page refresh?

Currently, I have developed a webpage that showcases all meetings with collapsible accordions. Initially, all the meetings are collapsed. However, when the user clicks on the meeting button (labeled as 'Audio' in the screenshot), a request contai ...

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...

The stylesheet displays correctly in Grover debug mode, but does not appear in the downloaded PDF file

Having some trouble applying CSS to Grover, a tool I'm using to render and download PDF copies of documents generated in my app. While the CSS renders as expected in Grover's debug mode (rendered in Chromium), it seems that my application.css is ...

Choose all elements following the first child element

My goal is to create a LESS rule that targets every element following the current element, excluding the first child. I've tried using this syntax: (& ~ *):not(:first-child) { margin-left: 5px; } and also this one: & ~ *:not(:first-child ...

Steps for adjusting an image in a Bootstrap Carousel

Currently tackling a simple bootstrap Carousel for a school project. I've adjusted the max-height of the images to 400px but it seems like only the top part of the images is visible. I attempted to adjust the margins on the image, and even thought abo ...

The format provided is not utilized by Datetimepicker

I've encountered an issue with the Date Time Picker provided by JQuery. Despite setting a specific format, it seems to be using its default date format which results in the following error appearing in the console: Uncaught TypeError: F.mask.replace i ...

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

Keep label at the forefront once input field is completed

Is it possible to keep my label positioned on top of the input field even after filling in data? I attempted using the valid function in CSS, but did not achieve the desired functionality. .txt_field input { width: 100%; padding: 0 5px; height: 4 ...

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

The alignment of Bootstrap 4 cards is not coming together as expected

Good morning, I'm currently working on organizing my Bootstrap card elements into rows of 3 cards each. I want the cards to be uniform in height and width, with spacing between them. For instance, if I have 7 cards, I'd have 3 rows of three card ...

Attempting to implement Ajax for my AddToCart feature while iterating through a form

At the moment, I am facing an issue where only the first item is being added to the cart and the page remains unchanged. On each page, there are a minimum of 3 items, with a new form created for each one. However, the other products do not get added to the ...

Tips on solving the Navigation bar burger problem with HTML and CSS

## I am having trouble making my navigation bar responsive using HTML and CSS as the navigation burger does not appear in mobile view ## To take a look at my code on jsfiddle, click here: [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/ ...

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...