CSS - How to centre a H1 tag? - Graphic Design Forums: UK forums for graphic designers

peps · 09-09-2010, 02:40 AM

hi there
have been trying to centre h1 tag (in drea,weaver)which is next to an image & both in two separate layers
even after i convert them into tables nothing happens- have tried the centre align, vertical align...
any ideas how to fix this problem?

for the time being-the h1 is a fe pixels up and it doesnt look really nice...and it needs to be centred
you can have a look at the image-just an example
thank you

sweetums · 09-09-2010, 09:36 AM

Well the left and right margins of the h1 tag need to be set to auto and the h1 tag needs to have a width assigned to it. Once you have set this up, the auto margins will auto centre the h1 tag to the middle of whatever value you set the width to be.

peps · 09-10-2010, 12:40 AM

Quote:

Originally Posted by sweetums

Well the left and right margins of the h1 tag need to be set to auto and the h1 tag needs to have a width assigned to it. Once you have set this up, the auto margins will auto centre the h1 tag to the middle of whatever value you set the width to be.

have tried below & my css is
h1 {
font-family: arial;
font-size: 13px;
font-weight: bold;
color: #3c659b;
text-transform: capitalize;
font-style: normal;
line-height: normal;
font-variant: normal;
word-spacing: normal;
display:inline;
margin-left: auto;
margin-right: auto;
width: 211px; - these are the size of the layer
height: 45px;
text-indent: 0px;
}

if i change the display to block in stead of inline - then it works (even if i fo margin-top&bottom) - however it changes the layer & after i try to conver then eveyrhting comes weird

if there is no display option at all - the layer's completely out of its way....
i bet it's something quite easy, though as i see the easiest things take most time to figure out...
anyone - any ideas/help how to fix it - would be most welcomed
thank you

djb · 09-10-2010, 10:04 AM

I’m not 100% certain of what you’re trying to achieve but how about this:

HTML Code:

<html>
<head>
<style type="text/css">
img {
	float: left;
}
h1 {
	background-color:#CCC;
	color: #3c659b;
	float: left;
	font-family: arial;
	font-size: 13px;
	font-weight: bold;
	height: 45px; /* This must match the height of the image */
	line-height: 45px; /* This must match the height of the box */
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 211px;
}
</style>
</head>
<body>
<img src="image.jpg" width="45" height="45" />
<h1>Test</h1>
</body>
</html>

This will give you:

DougBarned · 09-10-2010, 01:14 PM

Can you give us a link to your page/uplaod it so we can see what you've got and then tell us or show us what you want? That's the best way to get a fitting answer if the ones above don't quite nail it.

peps · 09-11-2010, 10:34 PM

Quote:

Originally Posted by djb

I’m not 100% certain of what you’re trying to achieve but how about this:

HTML Code:

<html>
<head>
<style type="text/css">
img {
	float: left;
}
h1 {
	background-color:#CCC;
	color: #3c659b;
	float: left;
	font-family: arial;
	font-size: 13px;
	font-weight: bold;
	height: 45px; /* This must match the height of the image */
	line-height: 45px; /* This must match the height of the box */
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 211px;
}
</style>
</head>
<body>
<img src="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/image.jpg" width="45" height="45" />
<h1>Test</h1>
</body>
</html>

This will give you:

The above did work on all the pages - however, there is one problem page with javascript and the click to activate menu ( so the fixit file apparently does interfere with the javascript file and the informaiton form the table-just disappeared...
& the h1 tag has moved the table down...what a mess....(btw have used the old style sheet...coz when i apply the new rule you advised me to - all go mad)
Red Sea Diving Holiday Deals - Olympic Holidays

& if you click on the Speclla offers link - you will see actually the way the poage's supposed to be...
thank you anyway

peps · 09-11-2010, 10:35 PM

Quote:

Originally Posted by DougBarned

Can you give us a link to your page/uplaod it so we can see what you've got and then tell us or show us what you want? That's the best way to get a fitting answer if the ones above don't quite nail it.

link below posted....just this one pages left as a huge problem
any ideas would be of great help
thank you all in advance

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode