Center align text in the navbar

I'm struggling to center the text in my navbar, even though I've added a back button and other elements. Can someone help me figure out how to get this text centered?

Below is my current CSS code:

#navbar {
    background: black;
    top: 0px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-indent: center;
    vertical-align: middle;
    position: fixed;
    z-index: 999;
    right: 0px;
    bottom: 10px;
}

#navbar > a{
margin-top:2%;
float:left;
}

If you want to take a look at it, here's a quick fiddle link: http://jsfiddle.net/w0sxf3fd/2/

Answer №1

Give this a try:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Check out the live demo here: http://jsfiddle.net/w0sxf3fd/5/

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

When the div reaches the top of the viewport window, call this function

Can you review the code snippet below? I need a function to trigger when the red box's top aligns with the viewport during scrolling. JS Fiddle: http://jsfiddle.net/ay5ttmLk/ HTML <div class="test" style="height:100px;width:70px;"> sadfsadf s ...

Creating Hover Effects for Touch Screen Devices with jQuery

Recently, I came across a piece of code that enables a link to become active on the second tap when using touch screen devices. I found this code snippet from: hnldesign.nl (function($) { var landingLink = '.nav-landing > li'; if ((' ...

The duplicate code is failing to display any output

Welcome to my first question here! Please excuse any rookie mistakes. I am currently working on a specialized calculator using HTML, JS (with jQuery), and CSS. This calculator is designed to handle multiple inputs and perform various calculations on a sing ...

Tips for staying on the same tab after submitting the form

I have encountered an issue where I need to keep the current tab selected even after submitting a form or refreshing the page. This is how my View File appears: <ul class='tabs'> <li><a href='#tab1'>Tab 1< ...

What is the best way to gradually show the contents of the second div starting from the bottom?

I want to create a scrolling effect where the contents of the second div are revealed as if they were fixed on the first div, similar to Conichi View example in JSFiddle .one { width: 768px; height: 700px; color: white; background-color: black; ...

glyph containing an undesirable space filled in

I have a character that I want to draw. The outline is correct but the filling isn't showing up as expected. Take a look at the comparison below (1. is what I want, 2. is what I currently have): c.beginPath(); //draw the curves c.closePath(); c.fi ...

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

Utilize local storage to dynamically update the background color of a div section

Struggling to create a functionality on my website where users can input a color, save it to localStorage, and have a specific div's background set to that color across all pages. The main content div (with the same ID) needs to display this color con ...

Adjust the width of the dropdown menu in Twitter Bootstrap's typeahead feature depending on the search

Not entirely certain if this issue is related to jQuery, but there's a strong suspicion that it might be. The problem at hand can best be described by the picture provided: The query output exceeds the width and doesn't resize or scale according ...

What is the reason for the absence of margin collapsing in this particular instance?

One thing that confuses me is the absence of vertical margin collapse between each definition list(dl). Looking at the style selector "#sweden dl" below, I have specified a margin of 10px 20px; meaning a margin-top and margin-bottom of 10px for each dl, a ...

Tips for adjusting the hue of a single color in a JPEG image

Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...

Switching image sources depending on CSS prefers-color-scheme: A guide

In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting. Is there a simpl ...

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

I was exploring this page (http://noahsdad.com/state-fair-texas-2011/) and noticed a scrolling sidebar to the left of the content area. I'm looking to adjust it so that it is closer to the content area. Any suggestions on how to achieve this? Thank y ...

Is it possible for me to use jQuery to apply e.preventDefault() to all links within my code?

Curious about this issue: In my HTML file, I have several links where I need to prevent them from jumping to the top of the page in their click functions. The action of preventing the default behavior (e.preventDefault()) needs to be added separately from ...

Conceal the year, month, and day within a datetime-local input

I am working with <input type="datetime-local" step="1"/> input fields, and I want users to only be able to edit the hours, minutes, or seconds. This is due to setting the minimum value using let min = new Date().setHours(0,0,0) and the maximum value ...

Styling images using CSS and AngularJS's NG-Repeat functionality

I am currently working on formatting images in AngularJS to display them next to each other in rows of four. However, it seems like when the code is generated from Angular, it is not displaying as expected. Below is a snippet of my HTML: <span ng-repea ...

Avoiding caching on HTML pages rendered by the SharePoint content editor web part

Is there a way to prevent caching on a HTML file displayed in a SharePoint library using a content editor web part? I attempted the following methods in the HTML file, but they were unsuccessful: <meta http-equiv="Cache-Control" content="no-cache" /&g ...

Tips for positioning the border properly within a scrollable table

My table has a sticky header with a fixed height, and in order to see more rows in the table, we have to scroll through them. The table design includes borders. The problem arises when there are more rows, as the border moves with the scroll. Initially, ...

Aligning a tri-column design

I'm encountering an issue with this code that's preventing it from running properly on Google Chrome (I haven't tried other browsers). When the content displays, the regular paragraphs appear aligned to the far left instead of being centered ...

Converting a query string to an array and then transforming it into a string

My main objective is to develop a form that collects user information and appends it to the URL query string. The data from the query string will then be organized into an array, which will subsequently be presented on the second page as text. However, I a ...