5 ms·

Oh wow. <center> </center>. When it was easy to do this.

by noufalibrahim 3y ago

sllabres 3y ago
Yes and this was just on HN: https://tonsky.me/blog/centering/ https://tonsky.me/blog/centering/
- spartanatreyu 3y ago
  Yeah, but that was less about centering in the web, and more about fonts in general tend to be made incorrectly which makes vertical centering hard everywhere, including the web.
  - sllabres 3y ago
    There where several topics around centering (horizontal and vertical) and of course much more detailed than a simple "center" But this [1] looks as something one would archive with a "center" back in the day. [1] https://tonsky.me/blog/centering/apple_sign_in_business@2x.webp?t=1713455735 https://tonsky.me/blog/centering/apple_sign_in_business@2x.w...
Kwpolska 3y ago
Horizontal centring was never hard in CSS, it's just `text-align: center` for inline elements and `margin: 0 auto` for block elements. It's vertical centering that was impossible for many years.
- tarsinge 3y ago
  `margin: 0 auto` was harder than <center> for a lot of people back then.
- shiomiru 3y ago
  > `margin: 0 auto` for block elements. margin: 0 auto adds an equal amount of margin to its left and right. This often does have the effect of getting the element centered, but may or may not be what you really need; e.g. it doesn't work if you need real margins, or if you want to nest aligned boxes. For center tags, browsers to this day use a separate vendor-prefixed property, e.g. text-align: -moz-center. It is still much easier to use than whatever margin/float/flexbox/grid hack standard CSS has come up with, but -moz-center seems to be doomed to an eternal life as a non-standard (albeit ubiquitous) property. (I remember that not so long ago even Google would set -moz-center on their search page. Such a great opportunity to standardize existing practice, left unexploited for 27 years and counting.)
- throwaway124219 3y ago
  Impossible for CSS, but not for the pragmatists who used tables for layout <td valign="middle">
sdsd 3y ago
On my personal website (darigo.su) I use a <center> tag to center an <hr> like so: <center> <hr style="width: 500px; margin-bottom: 40px; margin-top: 10px;"> </center> Also, if anyone reads this, can you go to my site and tell me if the little pokemon minigame in the bottom right corner works for you? It usually works for me but sometimes if I open the site in Chrome on guest mode, it just loads a blank screen, but then if I resize the window it starts working. Sigh.
- chrismorgan 3y ago
  You might as well just use auto margin-left and margin-right here: <hr style="max-width:500px;margin:10px auto 40px"> (I’d also go max-width instead of width for the sake of narrower viewports.)
  - sdsd 3y ago
    I might as well, but I find the <center> tag more charming. It's how my sister taught me to do it when I was learning NeoHTML for my Neopets pet page. After all, it's just for fun. In a different job market, I'd be worried about potential employers scrutinizing my code haha

Oh wow. <center> </center>. When it was easy to do this.

sllabres 3y ago

Yes and this was just on HN: https://tonsky.me/blog/centering/ https://tonsky.me/blog/centering/

spartanatreyu 3y ago
Yeah, but that was less about centering in the web, and more about fonts in general tend to be made incorrectly which makes vertical centering hard everywhere, including the web.
- sllabres 3y ago
  There where several topics around centering (horizontal and vertical) and of course much more detailed than a simple "center" But this [1] looks as something one would archive with a "center" back in the day. [1] https://tonsky.me/blog/centering/apple_sign_in_business@2x.webp?t=1713455735 https://tonsky.me/blog/centering/apple_sign_in_business@2x.w...

Kwpolska 3y ago

Horizontal centring was never hard in CSS, it's just `text-align: center` for inline elements and `margin: 0 auto` for block elements. It's vertical centering that was impossible for many years.

tarsinge 3y ago
`margin: 0 auto` was harder than <center> for a lot of people back then.
shiomiru 3y ago
> `margin: 0 auto` for block elements. margin: 0 auto adds an equal amount of margin to its left and right. This often does have the effect of getting the element centered, but may or may not be what you really need; e.g. it doesn't work if you need real margins, or if you want to nest aligned boxes. For center tags, browsers to this day use a separate vendor-prefixed property, e.g. text-align: -moz-center. It is still much easier to use than whatever margin/float/flexbox/grid hack standard CSS has come up with, but -moz-center seems to be doomed to an eternal life as a non-standard (albeit ubiquitous) property. (I remember that not so long ago even Google would set -moz-center on their search page. Such a great opportunity to standardize existing practice, left unexploited for 27 years and counting.)
throwaway124219 3y ago
Impossible for CSS, but not for the pragmatists who used tables for layout <td valign="middle">

sdsd 3y ago

On my personal website (darigo.su) I use a <center> tag to center an <hr> like so: <center> <hr style="width: 500px; margin-bottom: 40px; margin-top: 10px;"> </center> Also, if anyone reads this, can you go to my site and tell me if the little pokemon minigame in the bottom right corner works for you? It usually works for me but sometimes if I open the site in Chrome on guest mode, it just loads a blank screen, but then if I resize the window it starts working. Sigh.

chrismorgan 3y ago
You might as well just use auto margin-left and margin-right here: <hr style="max-width:500px;margin:10px auto 40px"> (I’d also go max-width instead of width for the sake of narrower viewports.)
- sdsd 3y ago
  I might as well, but I find the <center> tag more charming. It's how my sister taught me to do it when I was learning NeoHTML for my Neopets pet page. After all, it's just for fun. In a different job market, I'd be worried about potential employers scrutinizing my code haha