How can you nicely align the second row of a collection of <li> items without resorting to using divs?

I have a question regarding my website which has been causing me some trouble. I have a section with company logos within a div, but for some reason adding any other divs inside it breaks the layout. This is preventing me from centering the second row of logos beneath the first row. Unfortunately, I cannot provide a link here, so here is the relevant code snippet:

  <ul id="da-thumbs" class="da-thumbs">
        <li>
          <a href="#">
            <img src="x" />
            <div><span>Company A</span></div>
          </a>
        </li>
        [Additional logo list items]
      </ul>

The container and image sizes are causing the elements to display as 3 in the first row and 4 in the second. I've tried playing around with inline-block elements and margins, but nothing seems to work without creating a new div for the second row's 4 elements.

If anyone has any solutions or insights on how to resolve this issue, I would greatly appreciate it!

*Note: I had to remove the link for posting restrictions.

Answer №1

Does this meet your needs?

ul{text-align:center;}
li{display:inline-block;}

Check out the code on jsfiddle: http://jsfiddle.net/UpG5M/

Answer №2

If you're looking to isolate specific logos, consider using the :nth-oftype CSS pseudo-class.

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 make an exit pop up disappear when clicking on any area?

I'm new to programming in JavaScript and jQuery and I wanted to implement an exit pop-up feature. While I came across a helpful tutorial online, I encountered an issue where users could only exit by clicking on the "X" button. I want them to be able t ...

Creating a Responsive New Row for Grid Cells in CSS Grid

I am currently working on making my webpage responsive. I have encountered an issue where my text overflows into another grid cell because there is not enough space. Is there a way to move these cells into a new row so that the text has enough room and all ...

Tips on creating a recursive function based on depth levels

Function in need of completion: public static function f($rows) { $str = '<ul>'; $level = 1; foreach($rows as $row) { if($row['section_level'] > $level) ...

Can the style of certain words within a paragraph be altered using CSS only, without the need for any HTML tags?

Is it feasible to alter the appearance of certain words within a paragraph using CSS solely, without applying any HTML tags to those particular words? Awaiting a positive response. Thank you! ...

Unraveling the mysteries of Google web application parameters

I am currently in the process of gaining a better understanding of the Google web applications. The HTML source I am looking at contains JSON data that has been encoded in a way that is unfamiliar to me and I am seeking to decode it. The HTML source includ ...

overflow with a height of 100%

I want to add vertical scroll bars to my left and right columns without setting the height to 100%. How can I achieve this scrolling effect without specifying height: 100%? html,body{height:100%;} .row > .sidebar-fixed { position: relative; to ...

Utilizing jQuery for Dynamically Loading Child Elements

As users select choices from a side menu, a set of items is dynamically added. The more choices they make, the more items are displayed. Some items have a 'stats' div while others do not. I want to check if an item has a 'stats' div, a ...

Ensure that the width of the sibling div matches the width of its sibling image

I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the le ...

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

Steps to modify the display value of the Wordpress Elementor dropdown ul from block to grid

I have the Astra theme installed along with the Elementor plugin. Can anyone guide me on how to change the CSS value of the dropdown ul item display from "block" to "grid"? I have tried adding custom CSS code but it's not taking effect. .elementor-na ...

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

What is the best way to distinguish automatically generated links using JavaScript?

(Hello Dr. Nick) JavaScript is a new area for me and I am currently working on creating a website using asp.net EF JavaScript and other tools... I have created links based on the information stored in my database, and I want the name of the link to appea ...

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: https://i.sstatic.net/aqIHk.png Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() =& ...

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...

jQuery width property does not seem to be functional on menus that do not contain any dropdown

I am currently working on creating a menu that displays arrows underneath the items when hovered over or when the .active class is added to the menu. Everything is working fine, except for the fact that it only works on menus with drop-downs and the child ...

Why is it that filling a DataTable with a variable doesn't work, but when I input the same value into a PHP site and request it using AJAX, it suddenly works?

Contained within the variable named "test" is the following data: {"data":[{"HistChar_ID":"4","Vorname":"Garnier","Nachname":"de Naplouse"},{"HistChar_ID":"2"," ...

How can you modify the color of a card in React by mapping through an array and evaluating its value?

I'm attempting to modify the color of a card depending on the current slot value, which is an object in an array. While I am iterating through each card, I want to adjust the background color of the card based on this value. However, my current method ...

What is the best way to dynamically set the default value of a select option based on a

Based on the user's location, the post language is automatically set. I want to adjust the dropdown value to match the language of the post. Below is the code that I attempted to use, but it did not work as expected: <label for="lang">Languag ...

Maintain original image file name when downloading

I have successfully created a download link containing a base 64 encoded image. The only issue is that I need to retain the original file name, which is dynamic and cannot be hardcoded. downloadImage: function(){ var image_url = document.getEleme ...