Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

margin:auto not working nor <center>

Featured Replies

http://bkwebdesignandhosting.co.uk/blludog2/

 

this is basic html and i cant get it to work :/

 

i think its because i used some next code to make a sticky footer and its mucked up my codes or something anyways....

 

i need the header in the middle but it dont want to be there any help?

 

even in dreamweaver it shows it in the middle for me, so why is it not working when uploaded to the web!

 

 

dizi not even you will work this one out :p

Edited by kingy da killa

margin:0 auto; only works if you have set a width to it otherwise it won't be able to automatically set the left and right margins. <center> is deprecated and shouldn't be used. so to get it to work add something like width:900px; into your header.

 

Extra notes:

 

you should try to avoid using inline styling where possible, if you want to add a line why not add a border to an existing element like the header?

 

you can't use an id name more than once within a html page, if you want to use the same styling on more than one element then use a class. (example in your code id="linee")

 

 

 

Edit: well I hope I have :pp

Edited by Dizi

  • Author

margin:0 auto; only works if you have set a width to it otherwise it won't be able to automatically set the left and right margins. <center> is deprecated and shouldn't be used. so to get it to work add something like width:900px; into your header.

 

Ive added the width 900px still not working, new this was a weird one.. :S

 

post-24065-0-37124900-1295438468_thumb.png

 

see in dreamweaver its how it should be! but on the web its not, makes a change? lol

 

also ill stop using inline styles and use more classes ;)

Edited by kingy da killa

and stop using Dreamweaver for 'how it should be'. In a browser is how it should be, not Dreamweaver :)

what browser you looking at it in as it is central on firefox and IE7.

It works fine in all browsers (IE 6 & 7, FF, Opera, Chrome & Safari) execpt IE8 - but the problem here is the header image.

 

try

margin: 20px auto;

Edited by waynede

  • Author

and stop using Dreamweaver for 'how it should be'. In a browser is how it should be, not Dreamweaver :)

 

see in dreamweaver its how it should be! but on the web its not, makes a change? lol

don't you see my sarcasem there???????????????????????????

 

 

what browser you looking at it in as it is central on firefox and IE7.

It works fine in all browsers (IE 6 & 7, FF, Opera, Chrome & Safari) execpt IE8 - but the problem here is the header image.try margin: 20px auto;

i must be using ie8 then, no wonder i been racking my brains!!! thanks wayndede ill give it a go ! :)

 

EDIT: i am using ie8

 

EDIT: 20px auto dont work, im googling for the work-around for ie8 atm :/

Edited by kingy da killa

This will solve IE 8

 

#wrap {min-height: 100%; margin: 0 auto;}

 

Your #wrap container didn't have the margin so didn't where to position.

  • Author

yeah i just found that out 2... but ill still give ya +1 :)

i fixed it myself sorta thanks to you pointing out its a ie8 problem so cheers anyways!!!

Edited by kingy da killa

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.