5 ms·

That's easy to do without tables. See display: table; and display: inside-block for the div. text-align: center, yadda.

lisper 12y ago
Display: table is cheating, and essentially conceding that you should have been using tables all along. And there is no such thing as display: inside-block. (You probably meant inline-block.) The devil is in the details. I believe if you try it you will find it is nowhere near as easy as you imagine.
- JoshTriplett 12y ago
  > Display: table is cheating, and essentially conceding that you should have been using tables all along. Not at all. "display: table" (and the related "display: table-cell" and similar) mean that you've written something which is not semantically a table, but which should use the browser rendering conventions of a table. That's a perfectly reasonable distinction. Otherwise, would you suggest that every use of "font-family: sans-serif" is cheating and essentially conceding that you should have been using a <font> tag all along?
  - lisper 12y ago
    > Otherwise, would you suggest that every use of "font-family: sans-serif" is cheating Yes, if your intent is to use font-family as an example in an argument for using CSS. > and essentially conceding that you should have been using a <font> tag all along? No, I'm saying that a font tag and a font-family style are equivalent. One is as good as the other. You should read this: http://blog.rongarret.info/2009/02/on-semantics-of-html.html http://blog.rongarret.info/2009/02/on-semantics-of-html.html
    - JoshTriplett 12y ago
      Even if you argue that HTML tags don't have semantic meanings (which I'd strongly disagree with, pointing to numerous tools that derive useful semantic information from such tags), there's quite a lot of value in defining your markup in terms of semantics and then separately defining what you want those semantics to look like. With good semantic markup, you can easily retheme your site to look completely different, make it scale to a mobile UI, or make it accessible to users of screen readers. So, there's a major difference between using font-family and a <font> tag, and a major difference between using display: table* and <table>/<tr>/<td> tags. And for the same reason, you shouldn't use class="sidebar" if what you mean is class="navigation" (or for that matter <nav>). Let alone class="big-red-button" when what you mean is class="delete". To use an example from that article: sure, <p> is not as semantically significant as <section> or <h1>, but it's a lot more semantic than, say, <br/><br/>, which I've seen used between paragraphs. "This is a paragraph" is more semantically useful than "this has an indent on the left and 1.4x line spacing"; "this is a heading" is more semantically useful than "this is 24pt and bold".
      - lisper 12y ago
        > there's quite a lot of value in defining your markup in terms of semantics and then separately defining what you want those semantics to look like I completely agree. But HTML+CSS does not achieve that goal, at least, it didn't when that post was written.
- rgro 12y ago
  Although it was a little late to the party, flexbox solves a bunch of issues with css layouts. Here's a working example that doesn't use tables: https://jsfiddle.net/q8zxxr3b/ https://jsfiddle.net/q8zxxr3b/ Or, here's the inline example: <div style="display: flex; height: 100%; flex-direction: column; align-items:center; justify-content: center;"> <div style="text-align: center;"> <h1>Hello world</h1> The following green square should be centered:<br /> <div style="display: inline-block; width: 30px; height: 30px; background: green;"></div> </div> </div>
  - lisper 12y ago
    No, you have to vertically center it as well. Horizontal centering is fairly easy even with flex-box.
    - simcop2387 12y ago
      This does appear to be vertically centering it, at least in Firefox.
    - sim0n 12y ago
      That does vertically center the content.
    - nostrademons 12y ago
      Vertically centered on Chrome Mac as well. Safari (and IE) still requires a vendor prefix to use flexbox, but with that added, it works in Safari as well: https://jsfiddle.net/k281a8v0/ https://jsfiddle.net/k281a8v0/
      - lisper 12y ago
        Congratulations, yours is the first solution I've seen that actually works.

Display: table is cheating, and essentially conceding that you should have been using tables all along. And there is no such thing as display: inside-block. (You probably meant inline-block.) The devil is in the details. I believe if you try it you will find it is nowhere near as easy as you imagine.

JoshTriplett 12y ago
> Display: table is cheating, and essentially conceding that you should have been using tables all along. Not at all. "display: table" (and the related "display: table-cell" and similar) mean that you've written something which is not semantically a table, but which should use the browser rendering conventions of a table. That's a perfectly reasonable distinction. Otherwise, would you suggest that every use of "font-family: sans-serif" is cheating and essentially conceding that you should have been using a <font> tag all along?
- lisper 12y ago
  > Otherwise, would you suggest that every use of "font-family: sans-serif" is cheating Yes, if your intent is to use font-family as an example in an argument for using CSS. > and essentially conceding that you should have been using a <font> tag all along? No, I'm saying that a font tag and a font-family style are equivalent. One is as good as the other. You should read this: http://blog.rongarret.info/2009/02/on-semantics-of-html.html http://blog.rongarret.info/2009/02/on-semantics-of-html.html
  - JoshTriplett 12y ago
    Even if you argue that HTML tags don't have semantic meanings (which I'd strongly disagree with, pointing to numerous tools that derive useful semantic information from such tags), there's quite a lot of value in defining your markup in terms of semantics and then separately defining what you want those semantics to look like. With good semantic markup, you can easily retheme your site to look completely different, make it scale to a mobile UI, or make it accessible to users of screen readers. So, there's a major difference between using font-family and a <font> tag, and a major difference between using display: table* and <table>/<tr>/<td> tags. And for the same reason, you shouldn't use class="sidebar" if what you mean is class="navigation" (or for that matter <nav>). Let alone class="big-red-button" when what you mean is class="delete". To use an example from that article: sure, <p> is not as semantically significant as <section> or <h1>, but it's a lot more semantic than, say, <br/><br/>, which I've seen used between paragraphs. "This is a paragraph" is more semantically useful than "this has an indent on the left and 1.4x line spacing"; "this is a heading" is more semantically useful than "this is 24pt and bold".
    - lisper 12y ago
      > there's quite a lot of value in defining your markup in terms of semantics and then separately defining what you want those semantics to look like I completely agree. But HTML+CSS does not achieve that goal, at least, it didn't when that post was written.
rgro 12y ago
Although it was a little late to the party, flexbox solves a bunch of issues with css layouts. Here's a working example that doesn't use tables: https://jsfiddle.net/q8zxxr3b/ https://jsfiddle.net/q8zxxr3b/ Or, here's the inline example: <div style="display: flex; height: 100%; flex-direction: column; align-items:center; justify-content: center;"> <div style="text-align: center;"> <h1>Hello world</h1> The following green square should be centered:<br /> <div style="display: inline-block; width: 30px; height: 30px; background: green;"></div> </div> </div>
- lisper 12y ago
  No, you have to vertically center it as well. Horizontal centering is fairly easy even with flex-box.
  - simcop2387 12y ago
    This does appear to be vertically centering it, at least in Firefox.
  - sim0n 12y ago
    That does vertically center the content.
  - nostrademons 12y ago
    Vertically centered on Chrome Mac as well. Safari (and IE) still requires a vendor prefix to use flexbox, but with that added, it works in Safari as well: https://jsfiddle.net/k281a8v0/ https://jsfiddle.net/k281a8v0/
    - lisper 12y ago
      Congratulations, yours is the first solution I've seen that actually works.