Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/

I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to work for the list items.

Is there a method using only CSS to achieve this without making changes to the structure of <div>, <ul>, and <li>? I am using a wordpress plugin and adjusting these elements would be inconvenient.

The desired result is to have the "something #" list items centered aligned, so that when the browser is resized, the "something 3" item drops down while still remaining centered. I hope this explanation makes sense.

Thank you!

htmlcss

Answer №1

Avoid using float: left, instead opt for display: inline-block;

li {
    display: inline-block;
}

See it in action

.list-holder {
  background: black;
  height: 100px;
  color: white;
  text-align:center;
}
.div-list-item {
  background: red;
  color: black;
  margin-left: 10px;
}

.ul-class {
  list-style: none;
 padding: 0;
}

li {
    display: inline-block;
}

a {
    display: black;
}
<div class="list-holder">
  Hi
  <ul class="ul-class">
    <li class="li-class">
      <div class="div-list-item">
        Something 1
      </div>
    </li>
    <li class="li-class">
      <div class="div-list-item">
        Something 2
      </div>
    </li>
    <li class="li-class">
      <div class="div-list-item">
        Something 3
      </div>
    </li>
  </ul>
</div>

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

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

jqueryhtmlcssscrollnav

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

csstwitter-bootstrap

Unable to make the Show/Hide Loading GIF function work as intended

Could someone please help me with my code? I'm trying to display a loading GIF image while waiting for an ajax request to complete. When the button is pressed, I want the loader to be shown until the data is returned from the server. I would greatly ...

jqueryhtmlcssajax

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

javascripthtml

A step-by-step guide on ensuring mandatory completion of all input fields prior to form submission

I'm new to JavaScript and I need some help. Currently, I am trying to implement input field validation using pure JavaScript for a form. However, I am facing an issue where the "Required" message only appears next to the last name input. What I want ...

javascripthtmlformsdom-events

Every time I try to call the event in jQuery for the second time, it fails to work

I am currently working on a website that features an image gallery powered by the jquery wookmark plugin with filtering capabilities. Recently, I integrated the colorbox plugin (which was provided as an example by wookmark) to enhance the user experience. ...

javascriptjqueryhtmlcolorboxwookmark

My goal is to develop a PHP photo gallery using either an array, session variables, or cookies

I am in need of a solution for my issue. https://i.stack.imgur.com/Xe65l.png The image shows the front end, and I require a corresponding function to be developed for it. ...

phpjqueryhtmlcsswordpress

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

javascriptangularjshtmlgithub-pages

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

javascriptjquerycss

Issue with md-stretch-tabs in Angular-Material causing a problem

I am in the process of developing an Angular-based application. ISSUE: I included md-stretch-tabs in my md-tabs element, but when I switch to tab#2, the tab retracts as if there is not enough space to flex. Is this problem related to dependencies or the c ...

javascripthtmlangularjsangular-material

The JSON data response is not being properly displayed on the div element

I am having trouble with the success function in my ajax call. The data is processed correctly in the view and the ajax call works fine, but for some reason, the data is not getting appended to the div. Here is my jQuery: $(document).ready(function() { ...

javascriptjquerypythonhtmldjango

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

javascriptcss

Incorporating custom HTML5 player to watch Youtube videos on my website

I'm trying to display YouTube videos on my website using a simple video tag. I've managed to retrieve the encoded url of the video from the page source and successfully download it through IDM, but when I try to use this URL as the source for an ...

javascriptphphtmlvideoyoutube

Incorporating outside content into HTML

Currently, I am working on a project at my job which requires me to create a comprehensive help file with multiple chapters and extensive text all within one large HTML file. However, as the text will need to be translated into different languages, I am lo ...

javascriptjqueryhtml

Unexpected Issues with the Ant Design Sidebar Layout Demo

My React webapp is utilizing the Ant design component framework version 4. I attempted to integrate this example from the Antd documentation into my webapp: https://codesandbox.io/s/ymspt However, when I implemented the code in my webapp, the result didn ...

javascriptcssreactjsantd

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

javascriptcssvue.jsvue-routervuetify.js

Tips for aligning a row at the bottom within a nested column

Desired Outcome I am struggling to arrange two smaller images next to a larger image using Bootstrap 4. Specifically, I am having difficulty aligning one of the smaller images at the bottom so that it matches the alignment of the larger image. The layout ...

htmlcsstwitter-bootstrapbootstrap-4

Position a modal in the vertical center with scroll functionality for handling extensive content

Looking for ways to tweak a Modal's CSS and HTML? Check out the code snippets below: div.backdrop { background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2020; } ...

htmlcss

Ways to align elements horizontally while preventing them from shifting positions

I'm faced with a layout challenge where I need to place 2 components side by side, but I want one component to stay on the right without affecting the orientation of the other component. Example: https://i.stack.imgur.com/T5Ram.png Currently, when I ...

htmlcssreactjsmaterial-ui

Utilizing Google Maps to display an infowindow upon clicking a location from a geojson file

I want to implement info windows that pop up when markers on a map are clicked. I used the sample code provided by Google (below) to create a marker map from geojson files dragged and dropped into the window. My goal is for the info windows to show text ta ...

javascripthtmlgoogle-maps