Having trouble with centering my div in HTML and CSS

Coding Challenge

.nav_bar {
position: absolute;
top: 0;
width: 800px;
height: 23px;
display: inline-block;
text-align: center;
background-color: #0090bc;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border: 2px solid #004D6F;
-webkit-box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.7), inset -2px -2px 0px rgba(0, 0, 0, 0.7);
box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.7), inset -2px -2px 0px rgba(0, 0, 0, 0.4);
padding: 10px;
font-family: arial;
color: white;
}
<center>
<div class="nav_bar">
<center><font size="5"><span class="shadow"><b>Text</b></span></font></center>
</div>
</center>

Anyone else experiencing issues with the alignment of the '.nav_bar' div? I even tried adding the center tag but it's still not centered. Can someone lend a hand to troubleshoot?

Output:

jqueryhtmlcss

Answer №1

Update

position:absolute;
top: 0;

Modify

margin: 0 auto;

See this example on jsfiddle: https://jsfiddle.net/efhu4h4h/

Please take note that the width was adjusted to 100px for better display.

Answer №2

To maintain the position: absolute, simply include these styles in your .nav_bar class for centering:

left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);

Answer №3

Try adding "align:center" to your CSS class.

.myClass {
    align:center;
}

This should help resolve the issue for you.

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

Transitioning background color on hover using HTML and CSS styling techniques

My goal is to change the background color of an element when the cursor hovers over it. Oddly enough, the transition is successful for altering the font size but not for the background color. Here is my CSS code: .ul01 a,p{ height: 100%; display: ...

htmlcss

Attempting to transmit multiple variables

Can anyone provide assistance with passing multiple variables from one page to another? I am able to pass a single variable, but I need to send more than one by clicking a link. Below is a snippet of my code containing the rows I want to transmit to the ne ...

phphtmlpdo

Developing a one-of-a-kind jQuery plugin with customized CSS styling

I am trying to create a custom jQuery plugin that will control the CSS on targeted paragraphs. Despite my research, I have not found any articles explaining what I need. I attempted to write the following code snippet, but it did not work. Can someone tell ...

jqueryjquery-plugins

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

Using jQuery Modal Dialog with ASP.NET MVC 2

In my ASP.NET Mvc 2 application, I have a grid of user info. When a user is clicked, a jQuery Modal dialog opens allowing me to edit and save the user's information successfully. I am now looking for assistance on implementing validation on this moda ...

javascriptjqueryasp.net-mvc

Is there a way to switch out the navigation icons on the react-material-ui datepicker?

Can the navigation icons on the react-material-ui datepicker be customized? I've attempted various solutions without any success. <button class="MuiButtonBase-root MuiIconButton-root MuiPickersCalendarHeader-iconButton" tabindex="0&q ...

cssreactjsmaterial-ui

trouble with react-table's default height and flexible design

I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...

cssreactjsreact-table

Default check reversed for radio inputs

I am working with an MVC radio button group, and the issue I'm encountering is that even though the value of 1 "Copy" is set to checked="True", it is not displaying as pre-checked. Here's the code snippet: <div class="editor-field"> < ...

htmlradio-button

Attaching a buoyant div to the precise location of a different element

I have a unordered list (ul) with individual list items (li) that are displayed within a scrollable container. This means that only 8 list items are visible at a time, but you can scroll through them to see the others. Each list item (li) has an "edit" b ...

javascriptjqueryhtmlcss

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

htmlcss

What is the best method to display an asterisk (*) in red while using React and Material UI

In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color? Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/ ...

javascriptcssreactjsmaterial-designmaterial-ui

Issues with a jQuery ajax request

Recently delving into jQuery and finding it enjoyable so far. However, I've encountered an issue with an ajax call and could use some assistance. Here's the code snippet for my ajax call: // Initiating the ajax request $.ajax({ // PH ...

jqueryajax

Obtain the Ajax URL from a different webpage

I have been exploring various methods to access the ajax function of a website. Here is the code snippet I am working with: $.ajax({ type: 'POST', url: 'sched', //more code here.. }); It's worth noting that in the UR ...

ajaxjquery

I am facing an issue with jQuery wherein I am unable to dynamically assign a variable to an element's

I have a function that adds list elements to the #exercise-checkbox-list using AJAX. This function works fine on the backend side, but there is an issue where the second time a user adds an exercise, the new exercise's ID ends up being the same as the ...

jqueryajax

stopping action when hovering

Looking for some assistance with my javascript function that scrolls through an array of images on a set interval. I want to enhance it by pausing the rotation when hovering over any of the images. Javascript (function() { var rotator = document.getE ...

javascriptjqueryimage

What is the process for creating this image using HTML and CSS?

Looking to style an image using HTML and CSS. This is what I attempted: <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span> However, the result doesn't ma ...

htmlcss

Are there any reliable PHP classes available to generate HTML tables efficiently?

Searching for an advanced PHP class that can effortlessly create intricate HTML tables, including the ability to handle colspan/rowspan and assign specific CSS classes to rows, columns, and cells. ...

phphtmlhtml-table

Unable to change the color of InputBase component's placeholder in React.js

I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...

javascriptcssreactjs

I am having difficulty retrieving the JSON object that was sent by the servlet

$(document).ready(function() { var path = null; console.log('${pageContext.request.contextPath}/loadfile'); $.ajax({ dataType: "json", url: '${pageContext.request.contextPath}/loadfile&apos ...

javajavascriptjqueryajaxservlets

Disappearing sticky-top navbar in Bootstrap when scrolling

I'm having trouble with the navbar on my website. Currently, it sticks to the top until I scroll out of the hero-image and then disappears. I would prefer the navbar to remain present throughout the entire page. Any suggestions on how to achieve this? ...

htmlcsstwitter-bootstrapbootstrap-4