The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code.

 <nav className="nav navbar">
        <h3> Logo </h3>
        <ul className= "nav-link1">
            <li className="nav-item1 ">
                <Link to="/">Home</Link>
            </li>
            <li className="nav-item1 ">
                <Link to="/button">Button</Link>
            </li>
            <li className="nav-item1 ">
                <Link to="/text">Text</Link>
            </li>
        </ul>
    </nav>

and here is the corresponding CSS:

.nav{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  background: rgb(250, 172, 3);
  color: aliceblue;
}

.nav-link1{
  width: 50%;
  display: flex;
  justify-content:space-between;
  align-items: center;
  list-style: none;
}

I also have Bootstrap imported into this project.

Any assistance on this matter would be greatly appreciated. Thank you!

htmlcssreactjs

Answer №1

Make sure to replace class with className when working with react.

.nav{
  display: flex;
  flex:1;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  background: rgb(250, 172, 3);
  color: aliceblue;
}

.nav-link1{
  width: 50%;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items: center;
  list-style: none;
}
 <nav class="nav">
        <h3> Logo </h3>
        <ul class= "nav-link1">
            <li class="nav-item1 ">
                <Link to="/">Home</Link>
            </li>
            <li class="nav-item1 ">
                <Link to="/button">Button</Link>
            </li>
            <li class="nav-item1 ">
                <Link to="/text">Text</Link>
            </li>
        </ul>
    </nav>

Answer №2

When using bootstrap, the ul element comes with a specified padding-bottom. To align it vertically, simply include margin-bottom: 0 in your custom .nav-link1 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

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...

javascripthtmlangulartypescriptngrx

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

javascriptcssvue.jsnpmwebpack

Utilizing object as props in ReactJS with TypeScript

I'm new to working with ReactJS, and I made the decision to use typescript for my current project. The project is an application that fetches movies from an API and displays them. Take a look at the app: import React from 'react'; import &a ...

reactjstypescript

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS anim ...

cssthree.js

Encountering the React Native error message "TypeError: Object(...) is not a function" while using react navigation stack

I am currently facing an issue with my react-navigation-stack. My suspicion lies in the dependencies, but I am uncertain whether that is the root cause. The objective at hand is to create a text redirecting to another page. If there is any irrelevant code, ...

javascriptreactjsreact-nativereact-navigation

Error: rails-ujs has already been initialized and running

I'm in the early stages of developing a Rails application that incorporates React on the front-end, but I'm struggling to load my test/setup component. I'm unsure of the root cause of this issue or how to go about resolving it. After search ...

ruby-on-railsreactjs

Guide on using timestamps in PHP

I am struggling to incorporate the current date and time of the SO-NUMBER that the user is entering. The issue I'm encountering lies within the IF..ELSE loop, it only updates one column in the database, which is the "samplerecived" column even if I ...

phphtmlmysql

The onClick function is not functioning as expected in ReactJS when using the provided code

const [openChat, setOpenChat] = useState(false); const handleOpenChat = () => setOpenChat(true); <button class="openButton" onClick={() => {handleOpenChat}} style={openButton}>Start Chat</button> <div cl ...

reactjsformsreact-hooksbuttonclick

A shift in the sequencing of Hooks utilized by WithStyles has been identified by React

Recently getting started with ReactJS, I encountered an issue involving 'withStyles' while working on a project. Within my class component 'Category', I utilize another class component called 'CreateCategory' for creating new ...

reactjsreact-reduxmaterial-ui

I am encountering unexpected issues with the functionality of img srcset and sizes

Attempting to enhance the responsiveness of images on my website has led me to discover the srcset and sizes attributes. The objective is clear: If the screen size exceeds 600px or falls below 300px, a 250x250 image should be displayed For sizes in betw ...

htmlcssimageresponsive-designsrcset

What is the best way to swap out an HTML file with another without altering the link?

I'm working on an HTML file, which is basically a webpage. My goal is to create a functionality where clicking a button will dynamically replace the content of the page with another HTML file, complete with its own CSS, JavaScript functions, and other ...

javascripthtml

Utilize JQuery's .append() method to insert a new element into the DOM and then trigger an "on click" event within

I am attempting to use the .append() method to add a new radio button, and then when I click on the new radio buttons, trigger a new function. However, I am having trouble achieving this with my current code: HTML: <label>Where should the photo be ...

javascriptjqueryhtmlappend

Can HTML5 be used to interact with a WebApi REST service?

My main query is whether it is feasible to access a WebAPI Rest services (such as a CRUD developed by myself) using HTML5? I am troubled by the fact that whenever I attempt to use an ActionResult in any WebApiController, the framework restricts me from d ...

c#htmlrestweb-servicesasp.net-web-api

The property is not found in the '{}' type but is necessary in the type... Typescript connect strategy

Hello, I am currently trying to establish a connection pattern for React with TypeScript. I have a reducer set up as follows: type State = { version: number, a?: string } interface ActionC { type: string payload?: number } type IAction = Action ...

reactjstypescriptredux

Having trouble getting padding to work inside a pre block, even when using a wrapper div?

Snippet of HTML Code: <div class="prewrap"> <pre> stepsize = .01 samplestimes = 30 universex = seq(-1, 1, stepsize) universey = sin(pi * universex) </pre> </div> Sample CSS Styles: #prewrap { background-color: #e3e3e3; pa ...

htmlcssweb

What steps can I take to ensure that a user only clicks on my voting link once for a specific post?

I am managing a MySQL database with two tables. One table is named 'users' with the column 'uname' as the primary key, which stores usernames as strings. The second table is named 'posts' with the column 'id' as the ...

phphtmlmysql

The data insertion query in MYSQL seems to be malfunctioning

I am facing an issue with inserting data from a form into a database table named "sumation". Despite using PhpStorm IDE, I am getting errors indicating that no data sources are configured to run the SQL and the SQL dialect is not set up. Can anyone help ...

javascriptphphtmlmysql

Encounter the error message "A conflicting version of webpack has been detected higher in the directory tree" in your Create React App project

When I try to run npm start on my CRA app, I encounter an error. After attempting to uninstall and reinstall webpack, the only solution that seems to work is creating a ".env" file at the root with SKIP_PREFLIGHT_CHECK=true. [email protected] sta ...

node.jsreactjsnpmwebpack

The universal CSS variables of Material UI

Creating reusable CSS variables for components can greatly simplify styling. In regular CSS, you would declare them like this: :root { --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3); } This variable can then be utilized as shown below: .my-class { ...

javascriptcssreactjsmaterial-uicss-in-js

Replace the typical bootstrap text class with stylish and modern google material icons

As a newcomer to the world of javascript, I acknowledge that my approach may not be ideal... I'm attempting to modify the color of a material icon upon clicking it. Essentially, I want to toggle it on and off. The challenge lies in the code's in ...

javascriptjquerycssgoogle-material-icons