I'm having trouble centering the links in my navigation bar using flexbox, and I'm not sure how to fix it

Struggling with creating a navigation bar for my portfolio-building project. The "Who needs a quote" element is correctly displaying on the left, but I can't figure out how to center align the links "Sports, business, politics". Tried using flexbox options without success. Any help would be greatly appreciated. Below is my code. Thanks!

//js file
import React, {Component} from 'react';
import {Navbar, Nav,NavDropdown, Form, FormControl, Button} from 'react-bootstrap';

import './Topbar.css'
import img from './logo.png'

class Topbar extends Component {
  render() {
    return (
      <div className = "OuterDiv">
        <div>
        <a class="active" href="/">Who Needs A Quote!?</a>
        </div>
        <div class = "topnavcenter">

        <a href="/SportsPage">Sports</a>
        <a href="/BusinessPage">Business</a>
        <a href="/PoliticsPage">Politics</a>
        </div>
      </div>

    )
  }
}

export default Topbar;

//css file

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;

}



.topnavcenter {
  float: center;

}

Thanks again!

Answer №1

It is possible that there was some confusion in understanding the question, but I will do my best to provide an answer. It seems like you may need to include the following code for the topnavcenter block:
-ms-align-self: center;
align-self: center;

Answer №2

There are multiple approaches to centrally aligning links, each dependent on the styling of the navigation bar.

text-align:center

To quickly center a basic set of text-only links, you can use text-align:center on the .topnavcenter element.

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;
}

.topnavcenter {
  text-align: center;
}
<div className="OuterDiv">
  <div>
    <a class="active" href="/">Who Needs A Quote!?</a>
  </div>
  <div class="topnavcenter">
    <a href="/SportsPage">Sports</a>
    <a href="/BusinessPage">Business</a>
    <a href="/PoliticsPage">Politics</a>
  </div>
</div>

justify-content:center

If you're aiming for a more elaborate navigation bar with button-styled links, it's recommended to utilize flexbox. By making .topnavcenter a flex container and applying justify-content:center, you can easily center its child elements.

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;
}

.topnavcenter {
  display: flex;
  justify-content: center;
}
<div className="OuterDiv">
  <div>
    <a class="active" href="/">Who Needs A Quote!?</a>
  </div>
  <div class="topnavcenter">
    <a href="/SportsPage">Sports</a>
    <a href="/BusinessPage">Business</a>
    <a href="/PoliticsPage">Politics</a>
  </div>
</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

How do I eliminate the MuiClockPicker-arrowSwitcher from my TimePicker component?

I'm facing an issue with removing the '<' and '>' characters in my TimePicker component. Below is a snippet of my code: <LocalizationProvider dateAdapter={AdapterDateFns}> <TimePicker {...field} openTo=&quo ...

Creating bonds between components in React

As a newcomer to React JS, I am exploring how to implement event listeners in VanJS. For organizing my layout, I have decided to create separate components for elements like a panel and a button. Now, I am faced with the challenge of triggering a state c ...

Tips on dynamically passing values according to media queries

Within my product section, there is a total of approximately 300 products. To implement pagination, I have utilized the ngx-pagination plugin. The products need to be displayed based on media query specifications. For example, if the viewport size falls wi ...

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

Is it possible to modify the text displayed under your website when you search for it online?

I recently developed a website using HTML, CSS, and Javascript. Whenever I search for it on the internet, there is always a text paragraph displayed below its name in the search results. A similar example can be seen in the image here for Facebook. Is th ...

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...

Is it possible for a table data cell to be nested within another table

Is it possible for a <td> to be a direct child of another <td>? For example: <td class="parent"> <td class="child"> <!-- Some content --> </td> </td> Or is it necessary to always create a new < ...

Spacing that separates elements vertically within a listing

I'm facing an issue with a list of elements arranged in a row that wraps onto a second line due to space constraints within the container. Is there a way for me to introduce additional spacing between the first and second line of these elements, bear ...

Show inline-block elements within a div that has a variable width, allowing for horizontal scrolling

Currently, my layout is as follows: https://jsfiddle.net/0r6cdwht/2/ Is there a way to enable horizontal scrolling when the items displayed inside the div overflow? I've done some research and came across a solution that suggested using white-spac ...

The version of caniuse-lite in Browserslist is no longer current. To update, please execute the following command: `y

I am encountering an error message in 2 of my Next.js applications that says: Browserslist: caniuse-lite is outdated. Please run next command 'yarn upgrade'. This message appears when I execute commands like yarn dev, yarn start, or yarn build. T ...

Troubleshooting npm ERR! errno -4094: A step-by-step guide

This is my first time working on a React project and as per the instructions from the MOOC, I had to set up routes using the command: npm install react-router-dom However, when I ran the command, the console displayed some errors: Here are the errors I e ...

Bootstrap 4 allows for the use of the d-lg-flex class to create a flexible column layout

I'm facing an issue with my table on smaller screens where some columns need to be hidden. Here's the code snippet I'm using: <table> <tr> <td>Normal 1</td> <td class="d-lg-flex d-none">hidden 1</t ...

The @media feature is not functioning properly

I am struggling with getting my media query to function properly on a school project. Despite carefully checking my code, I cannot figure out why it is not making the desired changes when viewed on a mobile device. If anyone has any suggestions or insigh ...

Control the HTML button's state according to the information received from the server

I am currently working with datatable Jquery and using an ajax call to retrieve data from the server. Let's assume that the database consists of three attributes: "Attribute1, Attribute2, Status". Depending on the Status attribute, I need to enable or ...

Tips for adjusting the color of a linear gradient in a shimmer effect

I have a puzzling question that I just can't seem to solve. My goal is to display a shimmer effect on cards as a temporary placeholder until the actual content loads. I found some CSS code in this answer, but when I tried it with a dark background, t ...

Issue with element alignment using CSS increments

I'm confident that this code should be functioning properly, but for some reason it's not. I feel like there must be a small detail that I'm overlooking: Markup: <section id="content"></section> Styling: #content { positi ...

Wrap it in a ReactJS container tag

Today I encountered a frustrating issue while diving into ReactJS. I'm excited to learn by getting my hands dirty, but unfortunately, I keep running into this error: Adjacent JSX elements must be wrapped in an enclosing tag (47:14) And here's t ...

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...

Hyperlinking Github.io Images

I'm facing an issue regarding image paths on github.io. It seems like the images from my github repository are not displaying properly (I made sure to check spelling and case sensitivity). I'm running out of ideas, so maybe you can help me spot m ...

repeating timer modifying state within the component

Question: I have an interval set up in my component: componentDidMount(){ this.timeID=setInterval(()=>{ this.setState({ text:this.props.text+"." }) console.log(this.state.text); },1000) However, currently it only adds one dot to the text e ...