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

Tips for designing a customizable color scheme for your website

Are you looking to implement a changeable color scheme for your website? Getting started can be daunting, especially if you're unfamiliar with sass. Would appreciate it if anyone could share some helpful tutorials or links? For example: example ...

javascriptcssbootstrap-4

Swap an iframe for an image pulled from the iframe's URL using jQuery

My plan is to create a variable by extracting an attribute's value in order to add a new object using that variable as the value of another attribute... In my media search site, I am working with a restricted environment where I cannot fully configur ...

jqueryhtmliframereplaceentity-attribute-value

Tips for preventing divs from sliding to the next row when adding margin in Bootstrap

{% for plant in plants %} {% if forloop.counter0|divisibleby:3 %} <div class="row row-cols-3"> {% endif %} {% include 'included/_plant_cell.html' %} {% if forloop.counter|divisibleby:3 %} </div&g ...

htmlcssdjangobootstrap-5

Recording videos using the Safari Browser

Within my ReactJs application, I have integrated react-multimedia-capture, a package that utilizes navigator.mediaDevices.getUserMedia and the MediaRecorder API to facilitate video recording. While I am successfully able to record videos on Chrome, Safari ...

javascripthtmlsafarigetusermedia

What could be the reason for the malfunction of my checkbox styling?

I have designed custom checkboxes and radio buttons with CSS styling as shown below: input[type="checkbox"]:checked + label:after, input[type="checkbox"][checked="checked"] + label:after, input[type="radio"][checked="checked"] + label:after, input[type="r ...

javascriptjqueryhtmlcssangularjs

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: However, it's currently showing up like this: I've been attempting to use inline block so that I can have the negotiate button and pro ...

angularhtmltwitter-bootstrapcss

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts ...

htmlcsstwitter-bootstrapmicrosoft-edgebootstrap-5

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

Is there a way to showcase the data from the .json file using the jquery library?

I have a .json file on the server containing data that I want to display on my webpage. Unfortunately, I'm not very familiar with JavaScript syntax, so I'm having some trouble. My goal is to show just one specific parameter from the file, but fo ...

jqueryjsonajaxgetjson

Guide on how to incorporate an external javascript file into an HTML button

I am currently working on an exercise through Udacity that involves creating an HTML form with JavaScript functions. The task is to input text into the form, submit it, and have it displayed on the webpage within a blue square. This exercise is designed to ...

javascriptjqueryhtml

Difficulty with animated presentations

As a developer with limited CSS experience, I am trying to create a CSS3 slideshow using only two images. After discovering some interesting code for this purpose, which can be found here, I decided to make a small change to the original code (specifically ...

htmlcss

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

I have a Bootstrap tour set up with code that is meant to capture the user pressing the end tour button and scroll them back to the top of the screen. However, currently the code runs when a new popover loads instead of when the end tour button is clicke ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-tour

What is the best way to place an anchor tag with an image inside a bootstrap grid cell?

I am facing an issue with a 9-cell grid that contains images using Bootstrap columns. The grid is responsive and functions perfectly when only images are present. However, I want to make the images clickable by placing them inside anchor tags (<a>). ...

htmlcssbootstrap-4

Switch between input and the input is not displayed inline

I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...

htmlcss

Challenges of relative positioning with dynamic height based on content

Hello! I'm trying to achieve this https://i.stack.imgur.com/Q6lXP.png In this case, there are 3 divs. The top one will have a width of 100% and a height of auto, with relative positioning. The second div is similar, but I plan to add some dummy text ...

htmlcss

The <a> tag with href attribute is mistakenly identified as an external link when used in conjunction with the <base> tag

I am currently working with jQuery UI tabs using jquery 1.11.1 and jQuery ui 1.11.1. Within the <base> tag in the head>, I have the following: <base href="http://mytestdomain.com/" /> Upon loading the page, jQuery UI creates two tabs from ...

jqueryhtmlajaxjquery-uijquery-ui-tabs

Ways to apply autofocus to one element once another element already has it?

I have encountered an issue while attempting to give a textarea autofocus using the autofocus attribute. Upon doing so, I receive an error message in the console that says: Autofocus processing was blocked because a document already has a focused element. ...

javascripthtml

Modify the color of the header on Material-UI Date Picker

I recently integrated a Material-UI Date Picker into my React Single Page Application and now I'm facing an issue with changing the header color. I attempted to modify it using the muiTheme palette property, but unfortunately, the header color remains ...

javascripthtmlreactjsdatepickermaterial-ui

Ways to prevent recurring variables in Twitter bootstrap dialogues

I need assistance with deleting multiple links using ajax: <a id="id-1">link1</a> <a id="id-2">link2</a> <a id="id-3">link2</a> <a id="id-4">link2</a> ... This is the simplified version of my code: $(docum ...

javascriptjquerytwitter-bootstrap

Adjust the stroke color of an SVG element in HTML

I've hit a roadblock with my current project. I'm attempting to create an SVG for Formula 1 tracks that will highlight different sectors of the track when the mouse hovers over them. The sectors are neatly separated in the SVG as Sector_1, Sector ...

htmlsvghover