CSS - How to centre a H1 tag?

P

peps

New Member
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
 

Attachments

  • test.jpg
    test.jpg
    16.6 KB · Views: 11
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.
 
sweetums said:
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.
Click to expand...

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
 
I’m not 100% certain of what you’re trying to achieve but how about this:

HTML: 
<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:
 

Attachments

  • test.jpg
    test.jpg
    3.6 KB · Views: 4
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.
 
djb said:
I’m not 100% certain of what you’re trying to achieve but how about this:

HTML: 
<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:
Click to expand...

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
 
Last edited:
DougBarned said:
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.
Click to expand...

link below posted....just this one pages left as a huge problem
any ideas would be of great help
thank you all in advance
 
You must log in or register to reply here.
Back
Top