Centering h1 tag

Page 1 of 1

3 Replies - 284 Views - Last Post: 26 November 2012 - 08:05 AM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 02-October 12

Centering h1 tag

Posted 26 November 2012 - 07:56 AM

I have this CSS:
* {
	font-family: sans-serif;
}
h1 {
	padding: 24px;
	display: inline-block;
	border-radius: 25px;
	border-width: 10px;
	border-style: groove;
	border-color: #0055FF;
	text-shadow: 2px 2px 2px #333;
	color: white;
	background-color: #00CCFF;
	-webkit-box-shadow: inset 10px 10px 5px #333;
}
.h1center {
	text-align: center;
}

and this HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="distconv.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script src="distconv.js">
</script>
<title>Distance Converter</title>
<h1 class="h1center">Distance Converter</h1>
<hr />
</head>

<body>
</body>
</html>

and I'm wondering why the CSS won't center the h1 tag.
I've tried using margin: auto; and a few other things but nothing has worked. There is no Javascript involved(The distconv.js file is empty.)
I'm using google chrome

Is This A Good Question/Topic? 0
  • +

Replies To: Centering h1 tag

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Centering h1 tag

Posted 26 November 2012 - 07:58 AM

Hello,

You could place the H1 inside a DIV tag and give the DIV text-align: center. A DIV will expand to 100% of it's parents width by default.
Was This Post Helpful? 0
  • +
  • -

#3 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 02-October 12

Re: Centering h1 tag

Posted 26 November 2012 - 08:03 AM

View PostKruithne, on 26 November 2012 - 09:58 AM, said:

Hello,

You could place the H1 inside a DIV tag and give the DIV text-align: center. A DIV will expand to 100% of it's parents width by default.

I would do that but I know there's a way not to. This is the first time this method hasn't worked.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,690
  • Joined: 08-June 10

Re: Centering h1 tag

Posted 26 November 2012 - 08:05 AM

1) the margin:auto trick requires the width of the block element to be set.
2) since the element is inline-block, the default width is that of the contained text (and in that context, the heading is indeed centered)

I would remove the inline-block display and it should work.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1