Centering <div> tags

V-PV-P State College, PA Member
edited June 2011 in Internet & Media
What's the easiest way to center a <div> tag horizontally? Btw, the width is set to 80%, not a set pixel width.

In a separate <div> tag, how would I center it vertically?

I'm surprised you can't just use float:center to center it horizontally.

Comments

  • Straight_ManStraight_Man Geeky, in my own way Naples, FL Icrontian
    edited June 2011
    What version of html? This is somewhat more complex than it might appear. Firefox has more in the way of support for tagging in html 4.0, which it supports as well as well as html 5.0. IE also has support for html 5.0. Most of the web sites out there have html dev tools behind them, which are parsing html code for html 4.0. or html 4.0 transitional. More people are busy switching web code to html 5.0. They have to learn the newer version first or as they go or by doing homework of reading up on the new version. http://W3C.org/ or http://w3.org is the core site on the web for details and docs. In html 4.0 there is one way, and in html 5.0 there another.
  • Straight_ManStraight_Man Geeky, in my own way Naples, FL Icrontian
    edited June 2011
    I used cells in tables with each cell in a single cell high table that was set up as as various width wide using percentages both for cells and for total width of table.
  • SnarkasmSnarkasm Madison, WI Icrontian
    edited June 2011
    I believe margin-left:auto and margin-right:auto would center it for you.

    Vertically I'm less sure, but margin-top:auto and margin-bottom:auto would be worth a try.
  • the_technocratthe_technocrat IC-MotY1 Indy Icrontian
    edited June 2011
    so you've got a [div] that is set to 80% of the page width and you want something centered on the page, or centered in the [div]?
  • timuchantimuchan Fishers, IN Icrontian
    edited June 2011
    Snarkasm wrote:
    I believe margin-left:auto and margin-right:auto would center it for you.

    Vertically I'm less sure, but margin-top:auto and margin-bottom:auto would be worth a try.

    This is the method I typically use. Requires you to have a fixed width defined on the div though, so don't forget that. Shorthand for this is margin: 0 auto;

    This doesn't work of course when the width is 80%.... you might need to use absolute positioning. Is the parent container a fixed width and height?
Sign In or Register to comment.