#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221

    There is still no straight forward alternative for <center>


    <center></center> centers just about anything.

    The issue is <center> is not recommended for all the reasons you know.

    What would you use to center this without having to use <center>?

    Code:
    <center><div id="clockdiv" class="clockdiv">
            <div>
              <span class="days"></span>
              <div class="smalltext">Days</div>
            </div>
            <div>
              <span class="hours"></span>
              <div class="smalltext">Hours</div>
            </div>
            <div>
              <span class="minutes"></span>
              <div class="smalltext">Minutes</div>
            </div>
            <div>
              <span class="seconds"></span>
              <div class="smalltext">Seconds</div>
            </div>
          </div></center>
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,250
    Rep Power
    4150
    You center block elements by giving it a width and automatic margins.
    Code:
    #clockdiv {
        width: 20em;
        margin: 0 auto;
    }
    For inline or inline-block elements, you use text-align: center; on the parent element.
    Code:
    #clockdiv {
        text-align: center;
    }
    
    #clockdiv > div {
        display: inline-block;
    }
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221
    Hi;

    I am not sure about the width though. width: 20em!?
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,751
    Rep Power
    9646
    If you don't know the width to use then you don't need margin centering and all you're asking for is plain text-align:center.
  8. #5
  9. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221
    Hello;

    I want it to be center aligned regardless of the width.

    Here is the fiddle.
  10. #6
  11. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,751
    Rep Power
    9646
    Of course it won't work if you aren't applying the CSS to the right elements.

    Apply display:block and margin:0 auto to the iframe. And drop the display:inline-block from the clockdiv.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2018
    Posts
    10
    Rep Power
    0
    Hi,

    Why can't we use flex-box layout technique?

    Whether it is aligning elements horizontally or vertically, I find flex-box a lot easier.

    With flex-box, we don't have to worry about the width of container or element.


    Just wrap your content inside a div.

    Then style the div as follow.

    Code:
    div {
      display: flex;
      justify-content: center;
    }

    This is all. Your content will be centered.
  14. #8
  15. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221
    Hello;

    These are all reasons I like one simple <center>.

    It was clean and simple. Not sure why they say don't use it.

    It still works everywhere.
  16. #9
  17. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    358
    Rep Power
    133
    Hi there English Breakfast Tea,

    Not sure why they say don't use it
    It is not used because it is/was a "presentational element".
    CSS was created to replace "presentational elements" in the HTML.


    Unfortunately, frameworks like "Bootstrap" now add a whole bunch of
    "presentational class attributes" to the HTML to continue the bloody mess.


    coothead
    ~ the original bald headed old fart ~
  18. #10
  19. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221
    Hey coothead.

    Are there any reasons I stop using it?

    It works everywhere without a headache.

    The reason I ask is that I am in the middle of a massive project and I have used it a lot.
  20. #11
  21. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,751
    Rep Power
    9646
  22. #12
  23. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221
    Originally Posted by pavithraramesh
    Hi,

    Why can't we use flex-box layout technique?

    Whether it is aligning elements horizontally or vertically, I find flex-box a lot easier.

    With flex-box, we don't have to worry about the width of container or element.


    Just wrap your content inside a div.

    Then style the div as follow.

    Code:
    div {
      display: flex;
      justify-content: center;
    }

    This is all. Your content will be centered.
    This is pretty awesome thanks!!!
  24. #13
  25. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,478
    Rep Power
    221
    Originally Posted by requinix
    What does it say at the very top of this page?
    It says you always kick my a$$
    Have u EVER been wrong? REally!

IMN logo majestic logo threadwatch logo seochat tools logo