• How to auto-center
    18 replies, posted
  • I'm just beginning to learn HTML and CSS, and have gotten a small demo site going (internally). I've been using absolute positioning. this is fine usually, but I would rather have the page auto center the boxes I have in the center of the page, rather then treating the page as one big picture where things can be cut off. does anyone know a solution to this?
  • If you want to center a div you can use [code] margin-left: auto; margin-right: auto; [/code] to that div's css
  • I honestly have no idea what else I would use. most likeley because originally I was trying to put text ontop of an image. I don't really know, what would be a better solution
  • [QUOTE=zeroth;22870021]I honestly have no idea what else I would use. most likeley because originally I was trying to put text ontop of an image. I don't really know, what would be a better solution[/QUOTE] Remove the positioning thing, and just have the [code]margin: 0px auto;[/code]
  • this also doesn't solve the problem that I forgot to mention that I need images to be overlayed on the boxes, aswell as a nav bar
  • [QUOTE=zeroth;22870220]this also doesn't solve the problem that I forgot to mention that I need images to be overlayed on the boxes, aswell as a nav bar[/QUOTE] background-image: url(../blah/blah/blah.png) You get the idea.
  • [QUOTE=zeroth;22870220]this also doesn't solve the problem that I forgot to mention that I need images to be overlayed on the boxes, aswell as a nav bar[/QUOTE] [code]margin: auto auto;[/code]? I've never needed both, but that might work. Just make sure you define a width and height.
  • [QUOTE=turb_;22870673]You can't vertically align stuff very well with CSS.[/QUOTE] As I said, I've never actually needed to center something vertically so I was only taking a stab.
  • [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <style> #test {background-color:#FF0000; width:500px; height:500px; margin:auto; margin-top: 10%; margin-bottom: 10%;} </style> <div id="test"></div> </body> </html> [/code] Works fine.
  • Have an outside div with a css attribute of text-align: center; then the inside ones margin: 0 auto 0 auto.
  • [QUOTE=Sharpshooter;22873797][code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <style> #test {background-color:#FF0000; width:500px; height:500px; margin:auto; margin-top: 10%; margin-bottom: 10%;} </style> <div id="test"></div> </body> </html> [/code] Works fine.[/QUOTE] Exactly this.
  • [QUOTE=SataniX;22898159]Have an outside div with a css attribute of text-align: center; then the inside ones margin: 0 auto 0 auto.[/QUOTE] These are all the same: [code] margin: 0 auto; margin: 0 auto 0; margin: 0 auto 0 auto; [/code]
  • [code] <body> <div id="everything"> content </div> </body> [/code] [code] body{ text-align:center; /* for IE */ } #everything{ text-align:left; margin:0 auto; width:960px; } [/code] [editline]03:01PM[/editline] Also what a2h said.