CODEWITHSUNDEEP
htmlcss
MJH
MJH

Reputation: 5

I am trying to centre a banner

I am very new to HTML and CSS.

I am trying to centre a banner at the top of the screen.

I have tried setting the margin left and right to auto, however when I try that, or text-align: center, nothing happens and I'm not sure why...

I placed the banner within a div.

<div class="bruceBanner">
 <a href="http://www.example.com">
    <img border="0" alt="XYZ Banner" src="http://www.fablevision.com/northstar/make/objects/banner3.gif" width="553" height="172">
</a>
</div>

And referenced its class like so.

.bruceBanner {
margin-left: auto;
margin-right: auto;
}

The full html is below, in case of any mistakes I am unaware of.

<DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>XYZ Products</title>
<meta charset="utf-8"/>
 </head>

 <body>

 <div class="bruceBanner">
<a href="http://www.example.com">
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553"    height="172">
</a>
 </div>



 </body>
 </html>

Upvotes: 0

Views: 221

Answers (3)

jeffjenx
jeffjenx

Reputation: 17467

.bruceBanner is a div element.

div elements by default are block-level elements, meaning they take up 100% width.

You need to set a width smaller than 100% or change it's display to an inline-block.

.bruceBanner {
  margin: 0 auto;
  width: 50%;
}

Upvotes: 2

Angelo DeMichaels
Angelo DeMichaels

Reputation: 251

From w3schools.com

.bruceBanner {
    margin: auto;
}

Upvotes: 0

Marc B
Marc B

Reputation: 360702

You forgot a .:

.bruceBanner {
^---

. in CSS is for a class. without the dot, you're trying to style an unknown/illegal html tag <bruceBanner>

Upvotes: 1

Related Questions