Ways to align items in the middle of a list

I'm having trouble figuring this out. How can I properly center list items within the ul?

body {margin: 0}

ul {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  margin-top: 30px;
  overflow: hidden;
  background-color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul li {
  display: inline;
}

li a {
  display: inline-block;
  padding: 8px 11px;
  margin-right: 10px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
}

li a:hover {
  background-color: #111;
}
<ul>
  <li><a href="#">Home</a><li>
  <li><a href="#">About me</a><li>
  <li><a href="#">Projects</a><li>
  <li><a href="#">Contact</a><li>
</ul>

htmlcsshtml-listslistitem

Answer №1

If you want to achieve this layout, consider using the power of Flexbox:

body {margin: 0}

ul {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  margin-top: 30px;
  overflow: hidden;
  background-color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex; /* sets children as flex-items */
  justify-content: center; /* centers items horizontally */
}

ul li {
  display: inline;
}

li a {
  display: inline-block;
  padding: 8px 11px;
  margin-right: 10px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
}

li a:hover {
  background-color: #111;
}
<ul>
  <li><a href="#">Home</a><li>
  <li><a href="#">About Me</a><li>
  <li><a href="#">Projects</a><li>
  <li><a href="#">Contact</a><li>
</ul>

Answer №2

You simply need to insert 

 text-align:center;

into the ul styling. This will give you the desired outcome.

ul {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  margin-top: 30px;
  overflow: hidden;
  text-align:center; 
  background-color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex; /* added */
  justify-content: center; /* added */
}

After that, you can adjust the margin-right for the anchors as needed.

Answer №3

To align the content in the list centered, simply include text-align:center in the ul CSS style.

ul {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  margin-top: 30px;
  text-align: center;
  overflow: hidden;
  background-color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul li {
  display: inline;
}

li a {
  display: inline-block;
  padding: 8px 11px;
  margin-right: 10px;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
}

li a:hover {
  background-color: #111;
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#">Contact</a></li>
</ul>

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

Numerous DIVs with floating elements and border styling

Trying to align two divs with one floating to the left and with a width of 80%, while the other is floated to the left with 20% width, is causing some issues. I want to add a border on the right side of the first div and apply a box-shadow of 5px since eac ...

htmlcss-floatbordercss

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Controlling the window opener; Inserting text into an element in the parent window

A pop-up window allows users to select files, then displays the selected image's URL. However, I need to take additional steps beyond that. I am seeking a method to input the URL into an input element on the parent window. window.opener.document.wri ...

javascriptjqueryhtml

What is the best way to incorporate a confirmation model prior to accessing a dynamically generated link within a Jinja2 template?

I need assistance with deleting a record from an HTML table created within a Jinja2 template. I want to implement a confirmation prompt before proceeding with the deletion process. My development environment includes Bootstrap5. The current functionality ...

htmljinja2crudbootstrap-5

What role does the sequence play in matrix transitions that involve rotating and translating simultaneously?

Attempting to animate a matrix3d with both rotation and translation concurrently has yielded unexpected results for me. It seems that changing the order of applying rotation and translation produces vastly different outcomes. http://jsfiddle.net/wetlip/2n ...

javascriptcssmatrixinternet-explorer-10

Prevent cross-site scripting vulnerabilities by replacing the characters "'<'" and "'>'"

Is it possible to protect my website from XSS attacks by simply replacing < and > with &lt; and &gt;, or is there more to consider? For example: <?php echo '<div>' . $escaped . '</div>' ?> I am alread ...

htmlsecurityxss

Phonegap Application: Page design gets distorted following keyboard input

After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...

androidcssangularjscordovaphonegap-build

Is there a way to determine the quantity of items within a sortable div?

In my HTML document, there are multiple divs containing smaller divs that can be rearranged within each other. Upon loading the document, a random assortment of these smaller divs are added to #boxtop. Below is a snippet of my HTML code: <html> &l ...

javascriptjqueryhtmlcssjquery-ui-sortable

What is the best way to implement the useCallback hook in Svelte?

When utilizing the useCallback hook in React, my code block appears like this. However, I am now looking to use the same function in Svelte but want to incorporate it within a useCallback hook. Are there any alternatives for achieving this in Svelte? con ...

javascripthtmlreactjstypescriptsvelte

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected. To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quicks ...

htmlcssangularbootstrap-4

Designing a dynamic class object for a material table

I am in need of assistance with creating an HTML table using data retrieved from an API. The structure of the data is as follows: { strTableName: "TestTable", strComment:"Approved", lstTableHeaders:[ {strFieldName : "Sl No.", strType:" ...

htmlangulardynamicangular8

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

The function for clicking is malfunctioning

I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...

jqueryhtmlclickonclick

The table is unable to properly display the array data

My code includes an AJAX function that sends a GET request to an API and receives data in the format shown below: { "firstname": "John", "lastname": "Doe", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6 ...

javascripthtmlfor-loophtml-table

Failure to connect HTML and CSS files

My HTML and CSS files are not linking even though they are in the same folder. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl ...

htmlcss

Flexibility on smaller screens using Flexbox

On larger screens, I have arranged 4 icons in a row, but on smaller screens (less than 768px), I need to display only 2 icons in a row. This is my current code : .welcome { display: flex; justify-content: space-around; } @media (max-width: 768px) ...

htmlcssflexboxresponsive

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

Switching the color of the nav-link in Bootstrap

Struggling to change the color of my Bootstrap's nav-link to white with no success. Here is my code snippet: <nav class="navbar navbar-light" style="background-color: #5E9DFE;"> <a class="navbar-brand" href=& ...

htmlcsscolors

What is causing my inline JSX styling to override my media query?

After exhausting all my options and searching high and low for a solution, I am completely stuck. Despite trying various methods like importing media queries from a separate file and using ancestors to target elements, I still cannot get this to work. The ...

cssreactjsjsx