Bring the navbar text to the center of the screen in CSS

In summary, the conversation is about building a website and creating a navbar that is centered on the page. The speaker tried using the CSS property "display:flex justify-content: center" but it did not work. They provide a solution by increasing the value of "margin-left" or changing the "navbar-nav" class to "mx-auto". They ask for help in identifying which CSS rules are changed in this process.
  • #1
shivajikobardan
674
54
TL;DR Summary
Bring navbar at center CSS
https://demo.w3layouts.com/demos_ne...a-liberty-demo_Free/2002651968/web/index.html

This is the website that I am trying to build.

This is my current navbar.
fJLX3O3apC1PU0tIIH_EzdnGbwUqeLO7jmg5P_T2pLgmUUVb1Q.png


This is what I want to build.
wN-ub_JJv8XmNqoUbNsD4eCY6JQKuQ-EB2rZ-PJy94XDB9yulA.png

My focus is on "Home" to "Contact". I want to put it at the center of the page like in the second one. My guess was to do display:flex justify-content: center. But it didn't work.
Please guide me how to make it work?

Here's the codepen.
 
Technology news on Phys.org
  • #2
Increase the value here:
CSS: 
.collapse {
  margin-left: 25%;
}

Or, better, remove the previous value and modify the following:
HTML: 
<ul class="navbar-nav me-auto  ">
to:
HTML: 
<ul class="navbar-nav mx-auto  ">

(That is how it is done in your link)

Can you identify what CSS rules change in this process?
 

FAQ: Bring the navbar text to the center of the screen in CSS

How do I center the navbar text in CSS?

To center the navbar text in CSS, you can use the "text-align" property and set it to "center". This will align all the text within the navbar to the center of the screen.

Can I center only specific elements within the navbar?

Yes, you can use the "display" property and set it to "flex", then use the "justify-content" property and set it to "center". This will center specific elements within the navbar, while keeping others aligned to the left or right.

What if my navbar is not centered after using the "text-align" property?

If your navbar is not centered after using the "text-align" property, it is possible that there are other styles or properties that are affecting the alignment. You can try using the "margin" property and setting it to "auto" to center the navbar.

Can I center the navbar text on mobile devices?

Yes, you can use media queries to target specific screen sizes and adjust the alignment of the navbar text accordingly. For example, you can use the "text-align" property and set it to "center" only for screens with a maximum width of 768px, which is commonly used for mobile devices.

Is there a way to center the navbar text without using CSS?

Yes, you can use the "align" attribute and set it to "center" in the HTML tag that contains the navbar text. However, it is recommended to use CSS for styling purposes as it provides more flexibility and control over the appearance of the navbar.

Similar threads

HTML/CSS Container shrinks at certain screen widths (CSS)
Replies
5
Views
716
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
Replies
5
Views
582
HTML/CSS Background-position CSS confusion with percentage values?
Replies
9
Views
2K
JavaScript Links from navbar made with React don't work
Replies
2
Views
1K
HTML/CSS Python - HTML : Isn't this a dictionary ?
Replies
2
Views
1K
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
HTML/CSS Why is My HTML Footer Not Displaying Correctly?
Replies
4
Views
2K
HTML/CSS Is There a Way to Indent Tables in XHTML?
Replies
3
Views
3K
HTML/CSS Learning to Incorporate Flash Videos into XHTML Webpages
Replies
2
Views
2K
Learning about Python application deployment - possible recommendations
Replies
7
Views
1K

Hot Threads

Recent Insights

Back
Top