CODEWITHSUNDEEP
jqueryhtmlcss
user3575600
user3575600

Reputation: 45

My div won't center HTML CSS

My Code

.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>

The '.nav_bar' div won't centre for some reason! Here is the output! I've added the centre tag to see if it would centre but it wont't can someone please help me

Output: enter image description here

Upvotes: 3

Views: 7816

Answers (3)

Ankit Rathore
Ankit Rathore

Reputation: 46

Add align:center in your css class. 

align:center ;

It will work for you

Upvotes: -1

Lance
Lance

Reputation: 3932

Remove

position:absolute;
top: 0;

Add

margin: 0 auto;

Here's a jsfiddle: https://jsfiddle.net/efhu4h4h/

Note that I changed the width to 100px so it would fit in the window.

Upvotes: 7

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

If you want to keep the position: absolute You can add these styles to .nav_bar to center it:

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

Upvotes: 2

Related Questions