Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS - How to centre a H1 tag?

Discussion in 'Website Coding & Programming Forum:' started by peps, Sep 9, 2010.

  1. peps

    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
     

    Attached Files:

  2. sweetums

    sweetums Member

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

    peps New Member

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

    djb Member

    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:
     

    Attached Files:

  5. DougBarned

    DougBarned Member

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

    peps New Member

    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: Sep 11, 2010
  7. peps

    peps New Member

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

Share This Page