I am having trouble aligning the unordered list in the center

My struggle lies in centering the ul element which serves as a menu. Despite trying various CSS properties such as margin: 0 auto;, text-align: center;, and adjusting the margin value, I am unable to achieve the desired result.

This is the CSS code I have:

html {
font-family: 'Exo';}

body {
background: #1a1a1a;}

.nav {
margin-left: 50%;}

.nav li {
display: inline-block;
color: white;
padding: 15px;
margin-left: 10px;
border: 3px solid #2E9FFF;
text-align: center;
width: 225px;
background-color: DodgerBlue;
font-size: 200%;
transition: ease 0.5s;
text-decoration: none;}

.nav li:hover {
cursor: pointer;
border: 3px solid #2E9FFF;
border-radius: 50px;
background-color: #1a1a1a;}

.nav li a {
text-decoration: none;
color: white;}

This is the HTML code I have:

<ul class="nav">
    <li><a href="#">Najdi si hru</a></li>
    <li><a href="#">Jaký je náš cíl?</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>
htmlcss

Answer №1

Here is a simple way to begin.

To start, reset the padding on ul.nav and use text-align: center to keep the inline blocks centered.

Keep in mind that I have adjusted the widths and font sizes for illustration purposes, but you can easily customize them as needed.

If the elements are wide enough, they will wrap onto the next line.

html {
  font-family: 'Exo';
}
body {
  background: #1a1a1a;
}
.nav {
  margin-left: 100px;
  border: 1px dotted yellow;
  text-align: center;
  padding: 0;
}
.nav li {
  display: inline-block;
  color: white;
  padding: 15px;
  border: 3px solid #2E9FFF;
  text-align: center;
  width: 100px;
  background-color: DodgerBlue;
  font-size: 100%;
  transition: ease 0.5s;
  text-decoration: none;
}
.nav li:hover {
  cursor: pointer;
  border: 3px solid #2E9FFF;
  border-radius: 50px;
  background-color: #1a1a1a;
}
.nav li a {
  text-decoration: none;
  color: white;
}
<ul class="nav">
  <li><a href="#">Find a Game</a></li>
  <li><a href="#">What's Our Goal?</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Answer №2

Give this a shot

.navigation {
    min-width: 20%;
    display: table;
    margin: 0 auto;
    padding: 0;
}

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 showcase a list in three columns using PHP?

I've been struggling for hours to create a PHP code that will display a list in three columns with the following order: A D G B E H C F I Unfortunately, my current code only lists items in this order: A B C D E F G H I Here is the code I am curren ...

phphtmlhtml-table

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

csshtml

I keep receiving an error in Angular JS but I'm unsure of the reason

I've been working on AngularJS and created a basic module and controller. I'm attempting to show the data of an element inside the controller on the HTML view page, but all I see is {{student.name}} and I'm receiving an error message that sa ...

javascripthtmlangularjs

Unable to progress past first image in Bootstrap 5 carousel

I'm having trouble implementing a carousel on my HTML page. It only displays the first image, and the next and previous buttons are not functioning. I copied and pasted the code from Bootstrap directly. <link href="https://cdn.jsdelivr.net ...

htmlbootstrap-5

What's the significance of this issue? Fatal error: Inability to utilize function return value in write context

An error occurred while processing the PHP code Severity: Compile Error Message: Unable to use function return value in write context line number:116 floor($BudgetPerPerson) = $TotalBudget / $NumberOfPeople; label class="heading">What ...

phphtmlforms

Stop scrolling on the body of the webpage

I am struggling to find a solution to completely disable scrolling on the HTML body. I have experimented with different options, but none seem to work as desired: overflow: hidden; did not disable scrolling, only hid the scrollbar. position: fixed; w ...

htmlcssscroll

Update the content according to the size of the screen

I'm currently working on a project where I need to redirect pages based on screen sizes. I have separate index files for the mobile and web versions of the website. In the web version's index file, I've added the following script: <scri ...

javascripthtmlmedia-querieswindow.location

Is it possible to personalize a select button for both iOS and Android mobile platforms?

I've implemented a dropdown on my website for the desktop version and it works fine. However, I want to replace this dropdown with a select button on iPad and iPhone, as I prefer how it looks on those devices. Is it possible to style the select butto ...

htmlcssmobile

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

I am looking to enclose a series or cluster of consecutive English characters within a <span> tag. In simpler terms, I aim to alter the appearance of English language in my writing. Therefore, I need to identify English characters and surround them ...

javascriptjqueryhtmlregex

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

javascriptcsstypescriptmaterial-uiemotion

Implement a default dropdown menu that displays the current month using Angular and TypeScript

I am looking to implement a dropdown that initially displays the current month. Here is the code snippet I have used: <p-dropdown [options]="months" [filter]="false" filterBy="nombre" [showClear] ...

htmlangulartypescriptprimeng

Extracting information from a hyperlink without the need to actually click on it

Hello, I have recently started learning JavaScript and I am looking to accomplish a specific task. Currently, I am navigating on A.com/. Within the content of A.com/, there is a link labeled as A.com/B. Upon clicking on the link A.com/B, I can see ...

javascriptjqueryhtmlajax

Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...

jqueryhtmlcssslider

Using HTML and CSS to create a Contact Form

Greetings! I have come across this contact form code: /* Custom Contact Form Styling */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: v ...

javascripthtmlcssreactjs

What is the best way to incorporate data from my Input field into my Vue.JS application's existing data structure

Struggling with integrating new users into my personal project, particularly in passing input values (userName and userAge) to the parent element for addition to playersData. Here is a sample code snippet from the child component: `<template> <d ...

javascripthtmlvue.js

Activate a CSS button upon clicking and update the content within the div

In order to achieve the desired result of having menu CSS buttons change the content of a div when clicked, I have managed to do that successfully. However, a problem arises when clicking on the 2nd or 3rd button/link - it changes the div content, but as s ...

htmlcss

Dynamic rows in an Angular 2 Material data table

I'm currently working on dynamically adding rows to an Angular 2 Data Table ( https://material.angular.io/components/table/overview) by utilizing a service called "ListService". This service provides me with the columns ("meta.attributes") to be displ ...

javascripthtmlangulartypescript

Aligning images of varying sizes

I have implemented a PHP script that automatically resizes images proportionally to fit within a given height and width. For example, if the original picture is 200x100px and the target box is 180x180px, the resized image will be 180x90px. Although this s ...

csshtmlimagecentering

How can I extract the document that is generated when a button is clicked using BeautifulSoup?

Trying to utilize BeautifulSoup for scraping my banking website to automatically retrieve the generated PDF from monthly purchases. Successfully logging in and reaching the page with the button, but the button does not seem to be a simple link - possibly a ...

pythonhtmlweb-scrapingbeautifulsoup

Toggle the submenu with a fade effect when jQuery is clicked

Currently, I am facing an issue with creating links that are supposed to open their respective submenus on click. However, the script I have written is opening all submenus instead of the specific ones assigned to each link. Sample HTML Code: <nav> ...

jqueryhtml