Center align the division within the list item

Question

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!

html css

Answer 1

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>

Answer 2

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>

Center align the division within the list item

Answer №1

Similar questions

Maintaining my navigation menu as you scroll through the page

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Error encountered during GSTIN validation in the Polymer JS console

The image data is not displaying in the $_FILES variable

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

Having trouble retrieving the content within an HTML tag using jQuery?

Ways to prevent my website from being accessed through the Uc Browser

Validation is performed on the Bootstrap modal form, ensuring that the modal is only loaded after the

Steps to turn off a Material UI CSS class for an element universally

Creating a Custom Emoji Module

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

Here's a unique version: "Steps for replacing an outdated chart with a new one using Chart.js and

Enclose every line of the paragraph within a <span> element

Unable to locate the value property of a null object

Forecasting text input demands

Styling a Pie or Doughnut Chart with CSS

Setting the size of a box using CSS in HTML pages

The combination of Inline CSS and Bootstrap classes does not seem to be functioning properly

Utilizing jQuery to Adjust Tab Transparency

Are there any reliable PHP classes available to generate HTML tables efficiently?