Guide on aligning text to the center in the navigation bar

I am currently experimenting with a dropdown navigation bar using pure CSS. However, I am facing issues with text alignment as it only aligns the dropdown text. Setting left: 50% and right: 50% does center the text, but it doesn't cover the width of my page. Additionally, using overflow: hidden hides the dropdown which is not desirable.

Check out this JSFiddle for reference.

I want to achieve the text styling like in this example, but due to overflow issues, the dropdown is not visible.

CSS:


ul.dropdown, ul.dropdown li, ul.dropdown ul {
    // CSS rules here...
}
// More CSS rules...
htmlcss

Answer №1

Get rid of float: left; in your ul.dropdown li. Instead, include text-align: center; in your ul.dropdown and display: inline-block; in your ul.dropdown li

Check out the Fiddle Demo here

ul.dropdown {
    position: relative;
    z-index: 597;
    background-color: black;
    text-align: center;
}
ul.dropdown li {
    display: inline-block;
    min-height: 1px;
    line-height: 1.3em;
    vertical-align: middle;
}

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 causing my HTML to not recognize my Angular JS code?

Trying to dive into Angular JS, I wrote a small piece of code but for some reason, the HTML is not recognizing Angular JS. This is my index.html file: <!DOCTYPE HTML> <html ng-app="store"> <head> <link rel="stylesheet" type=" ...

javascripthtmlangularjs

The customary scroll bar located to the right side of the screen

I'm struggling to create a common scrollbar for both the left navigation div and right content div on a simple page, but all my attempts have failed. No matter what I try, the scrollbar only works for the content div. Is there any way to make them sha ...

htmlcss

What are the steps to include an image in the body of an email when sending it through SMTP?

I'm currently working on creating an email verification module and I want to include my company logo at the beginning of the message. However, all the solutions I've come across so far only explain how to attach an image to the email. What I aim ...

htmlvb.netemailsmtpgmail

Which DocType is most suitable for my web application?

I'm grappling with the HTML and XHTML specifications, and I can't decide which one to go for. Can you help me understand which is better? For instance, if I have a web application in PHP that searches an image database and displays results dynam ...

phphtmlajaxstandards

include a button next to the input field

As you reduce the browser window size, you may notice a different layout designed specifically for iPhone. One question that arises is how to add a button next to the search text box dynamically using JavaScript. The issue at hand is that the text box is b ...

javascriptjqueryhtmlcssjquery-ui

Switching button appearance when hovered over

Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS? ...

htmlcss

Expanded MUI collapsible table squeezed into a single cell

I'm experimenting with using the MUI table along with Collapse to expand and collapse rows. However, I've noticed that when utilizing collapse, the expanded rows get squished into one cell. How can I adjust the alignment of the cells within the p ...

javascriptcssreactjsmaterial-ui

"Enhance Your Website Navigation with Bootstrap Navbar Links Extensions

I'm stuck on nesting a "navbar" in a Bootstrap row. The issue I'm facing is how to get the links to expand across the entire column. https://i.sstatic.net/9QbSN.png The code for this problem looks like: <div class="col-6 p-3 ...

cssasp.net-corerazorbootstrap-4

Turning text into clickable links using JavaScript

I am faced with a scenario where I need to detect phone numbers within a string and convert them into clickable links. At the moment, using an external library is not an option. Here's the progress I've made so far: String: "This is my phone nu ...

javascripthtmlreactjs

Combining images with PHP

I have a collection of numerous images that are all the same size in terms of width and height. In total, there are over 50 unique images. My goal is to combine these images along both the horizontal (X) and vertical (Y) axes. Specifically, I would like ...

phphtmlimageimage-processingimage-manipulation

Having trouble retrieving the YouTube channel name using XPath node in Selenium and TestNG

My current task involves navigating to the YouTube website, entering the search term "qtp," and clicking on the Search button. Once on the results page, I need to extract the Channel Name. To achieve this, I used Firebug to identify the path for the first ...

javahtmlxpathseleniumtestng

Is there a way I can modify the display setting to show 4 slides per view?

var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...

javascriptcssswiper.js

When the form is submitted, I am unable to record the checkbox value

Hi, I have a question regarding submitting a form to the "/delete" route when a checkbox is checked. Although I am able to submit the form successfully, I am facing an issue retrieving the checkbox value that I assigned using ejs. Below are the relevant co ...

javascripthtmlnode.jsexpressejs

When utilizing pseudo element ::before and display:table-cell in IE11, the glyphicons content may not appear as expected

I've been working on this for a while now, but I can't seem to find a solution. The issue I'm facing is that I want to display a glyphicon before the content of a text-block, and I need that element with the icon to fill up all the height th ...

htmlcssinternet-explorer-11

Incorrect Alignment of Centered Boxes with CSS

I'm having trouble creating centered boxes with CSS. Currently, I have the following code: http://jsfiddle.net/LW7mN/2/ .trex-clear-all{ display: inline-block; width: 99%; height: 17px; font-size: 12px !important; text-align: -w ...

htmlcss

Using regex in PHP to wrap the <ul> tag with <div> is a useful technique

My html snippet looks like this. <ul style="margin-left: 240px;"> <li>One</li> <li>Three <ul> <li>dfdf</li> </ul> </li> <li>dfds</li> </ul> ...

phphtmlregex

Is there a way to expand this embedded video so that it spans the entire width of the screen

I have a code snippet with one row and two columns. I would like to embed a video from Vimeo in the first column so that it fills the entire column without any padding. Additionally, I want the two columns to be right next to each other with no space betwe ...

htmlcssiframebootstrap-4

What is causing some Font Awesome icons to not function properly with boostrapCDN?

I thought all Font Awesome icons would work by linking this bootstrap stylesheet, but I've only managed to get one of them (`.fa fa-deskto`) to display. The rest, like the second one for example (link below), simply don't show up: Both icons are ...

htmlcssreactjstwitter-bootstrapfont-awesome

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...

javascripthtmlcss

Having issues with AJAX and button submit while trying to upload a file using Flask

I've been attempting to incorporate a file upload feature (specifically a .csv file) using bootstrap, and then submit it by clicking on a button. I've experimented with various methods to implement the file upload functionality, but haven't ...

javascripthtmlajaxflask