9 ms·
“Googles 'vertical center div css' for the 100th time. reads for 7 minutes”
- jnpatel 11y agoAw man, I was hoping to see the final website your daughter ended up with! :)
- Animats 11y agoYou see, kiddies, we used to have programs that did all that for you. There was this program called Dreamweaver. You just opened up a design window and laid out the page by pointing and clicking. Anyone could do it. But if anyone could do it, "web programmers" weren't needed. So CSS was invented to make it more like programming, and especially to make it so complicated that it couldn't be done by pointing and clicking.
- azerothian 11y agoI cant tell if this is serious or sarcastic...
- bbcbasic 11y ago> more like programming Yes i.e. DRY
- cousin_it 11y agoDRY notwithstanding, I agree with Animats that design should be done visually, not programmatically. Using code for layout is just as bad as programming by flowcharts. Programming tools should reflect how a programmer thinks about the problem, and design tools should reflect how a designer thinks about the problem. Expensive "web programmers" shouldn't be needed for web design, just as "print programmers" aren't needed for print design.
- extra88 11y agoBut unlike print, the web is never not code. There are still people who design for the web making Photoshop comps that they throw over a wall to "web programmers" to make it work but while some say you should design in the browser, most say the designer making comps should have some understanding of what works on the web. Print designers also have to think about the platform their design is presented on e.g. what kind of color bleeding will happen in the press when an image is used on newsprint.
- cousin_it 11y agoI'm talking more about the kind of web that we could have, not the kind that we actually got. There's nothing about the concept of "worldwide set of pages connected by hyperlinks" that stops non-programmers from contributing. Non-programmers can already create printed pages (pretty) and spreadsheets (computational), so with better tech they could create the web as well.
- nathan_long 11y ago> Expensive "web programmers" shouldn't be needed for web design, just as "print programmers" aren't needed for print design. You don't need web programmers for web design. You can export from a WISYWIG to HTML, or design a big ol' GIF and post it on Wordpress. Lots of restaurants do that sort of thing. But you probably want something that interacts with the user, changes layouts based on screen size, provides information to disabled users, validates and submits information, allows commenting and moderation of comments, etc. Eg, a program. And you do need programmers for that.
- cousin_it 11y ago> changes layouts based on screen size Why can't the designer specify that? Because the current tools suck for designers (i.e. they were made for programmers). > provides information to disabled users Ditto. > allows commenting and moderation of comments There should be ready made solutions for that, usable by non-programmers. If you wanna buy a toaster, you don't go "oh, it's an Electrical Device and we need an Electrical Engineer". A toaster is complicated inside, but it was made with good engineering so users don't have to care. The web is not like that. The needs of most websites are well understood by now, but somehow we still need programmers to make layouts and comment systems. My only explanation is that the whole system of HTTP/HTML/CSS/JS is poorly designed, in a way that's very hard to fix. Name me one other medium where positioning elements on the screen/page/whatever isn't a completely solved problem. Show me a single game developer who just can't seem to get the crosshair centered vertically on the screen.
- supercoder 11y agoAll you need to do is simply take the 20 part video course http://flexbox.io/ http://flexbox.io/. Couldn't be easier !
- BurningFrog 11y agoBut Flexbox?
- deleted 11y ago[deleted]
- seanwessmith 11y agoWhy isn't there a MS Word for creating HTML?
- Rifu 11y agoIt's called Dreamweaver.
- elithrar 11y agoI've always thought Macaw (http://macaw.co/ http://macaw.co/) to come very close to this.
- andrewstuart2 11y agoActually, it used to be called Frontpage. It was pretty workable, but if you were able to figure it out, you were probably better off just learning HTML and CSS anyway. Creating anything beyond a really basic table layout was pretty maddening, IIRC. The typical problem with WYSIWYG webpage builders is that the web is not a printed document. If you don't know the underlying concepts of layout you expect things to behave much differently than they actually do. Or at least, that was how it was for me.
- bkjelden 11y agoA copy of Frontpage in middle school is what got me in to programming, back in the day. One of my earliest memories of 'coding' (It seems silly to call it that now, but hey, I was 13!) was opening the generated html files to remove the "Created with Frontpage" html comments that were automatically injected.
- deleted 11y ago[deleted]
- plorkyeran 11y agoIt doesn't do a very good job of it, but the MS Word for creating HTML is MS Word.
- bbcbasic 11y ago
- dennisbest 11y agoJust use flex-box. And by "use", I mean get ready to study it, change the way you write CSS, give it all of your worldly possessions, and eventually collect money for it at the airport.
- andrewstuart2 11y agoI thought the css-tricks page did an incredible job of both explaining the concepts and laying out the information in such a way that it makes a great quick reference once you've gone through it. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- teen 11y ago<div style="display:flex;justify-content:center;align-items:center;"> <div></div> </div> ?
- KirinDave 11y agoMaybe the OP meant their description in a... well... positive way? Certainly, flex-box addresses a problem that's been making CSS writers frustrated for a long time.
- netghost 11y agoThat is, assuming you don't need to support older browsers like ie9 or ie8...
- mattwad 11y agoIf you know the height of your centered box, it's not that hard. Create a wrapper div whose top is set 50% down the page but has a negative offset which is 50% the height of the box: .vertically-centered { position: absolute top: 50%; height: 200px; margin-top: -100px; /* minus half of `height` */ } If you have trouble, try setting `height` to 100% on the <body> tag and any parents
- zajd 11y agobody { position: relative; height: 100vh; } #content { height: <defined>; top: 0; right: 0; left: 0; bottom: 0; position: absolute }
- elixx 11y agoAt which point you use a bootstrap jumbotron like 2/3 of the sites I see.
- deleted 11y ago[deleted]
- lkrubner 11y agoThis is an example where the headline on Hacker News is 100x better than the original headline. I do wish Hacker News allowed these kinds of headlines, which draw out the parts of the article that are of most interest to the Hacker News crowd.
- jonahx 11y agoI upvoted based on the headline before I even started reading, which I rarely do.
- probably_wrong 11y agoI'd object that it ruins the punchline.
- sebkomianos 11y agoAnd to think that I was worried people might find my titling cheesy. I am glad to read these comments!
- willstepp 11y agodisplay:table and its kin are the greatest thing I ever discovered in css. No more centering problems and easy to reason about. I'm not sure if people just don't know about it, or there are use-cases where it doesn't work for them. I'll definitely use Flexbox when its more widely supported, though.
- pault 11y agoThey don't wrap when their parent container shrinks, but sometimes that's the behavior you want (navigation bars for example), and media queries get around those issues nicely.
- justindocanto 11y agoIt's really not that hard. <div class="center-this"><div>Stuff</div></div> .center-this {display:table;} .center-this > div {display:table-cell;height:100%;vertical-align:middle;} I even code pen'd it for you: http://codepen.io/anon/pen/RPEypL http://codepen.io/anon/pen/RPEypL
- jonahx 11y agoOne of the wonderful ironies of CSS is that after years of puritanical preaching about the evils of non-semantic table elements, the best-practice recommendation for centering a div of unknown dimensions, assuming you want any kind of legacy support, is[0]: <div style="display:table;"> <div style="display:table-cell;vertical-align:middle;"> <div style="margin-left:auto;margin-right:auto;"></div> </div> </div> [0] http://howtocenterincss.com/#contentType=div&horizontal=center&vertical=middle&browser.IE=8 http://howtocenterincss.com/#contentType=div&horizontal=cent...
- pault 11y agoOne could make the argument that having table layout behavior decoupled from a specific tag is a perfectly desirable state of affairs. One of the issues with using tables for layouts is the massive clutter of row and cell tags that make the markup extremely difficult to read. Being able to assign those behaviors when and where you need them is the best of both worlds.
- jonahx 11y agoThe irony is that what we are doing, semantically, is "centering." Yet to express that concept we are forced to refer to the entirely unrelated concepts of tables and cells, only because of the historical accident that table elements were the only way you could do many types of centering because CSS lacked basic facilities for layout. Also, naming issues aside, we are forced to pollute our markup with pointless, unsemantic container divs simply to achieve a basic style on the contained div.
- rimantas 11y agoI doubt you understand what the word "semantically" means. I don't see how polluting markup with <table> (and tables were often nested), <tr> and <td> is any better, not to mention that often already existing markup was sufficient and no extra was needed. Also, div's by definition have no semantic meaning, and that's a good thing—those who bothered to care know that tables for layout had their share of accessibility issues. Alas, now when most race to stuff as much anuglar bootstraps ino their SPA nobody cares about semantics and accessibility any more.
- bla2 11y agoThis is has been a problem for a long time, but it's fixed now: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ https://philipwalton.github.io/solved-by-flexbox/demos/verti... http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
- sago 11y agoIt'll be a while, sadly. IE8-10 are still up to 25% of the browsers[0] (caniuse puts them much lower, which isn't surprising for sampling dev oriented sites). IE10 (5% of that) needs a different syntax, and 8-9 don't support it. All three support table layout[1], which is why it is still the best solution if you care about compatibility. [0] https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpcustom= https://www.netmarketshare.com/browser-market-share.aspx?qpr... [1] http://caniuse.com/#feat=css-table http://caniuse.com/#feat=css-table
- hayksaakian 11y agoI don't think his kid needs to worry about supporting old IE.
- sago 11y agoReally? You don't think his kid's peers might not have the latest IE at home? Lot's of them will be on mobile, true (though some of them will be on Android's pre 4.4 browser, which also doesn't support it fully), but if they want to check from school, then school machines are neither likely to be the latest, nor the most diligently updated. I wasn't trying to be a smartarse, I wish flexbox was usable. But IE < 11 is still a very large player.
- cstejerean 11y agoIt isn't a very large player. Most websites will not see anywhere near 25% of IE < 11, even though that may be the global distribution. Even some of our most conservative enterprise clients have upgraded to IE 11. I'm not entirely sure how Microsoft pulled this off, but I'm impressed at how quickly they are pushing everyone to a modern browser. If you start a new project today, there is almost no reason to care about IE < 11. By the time you get enough users that IE itself becomes a sizeable number, I am willing to bet that IE < 11 will be around 5% of users on the high end.
- rsuelzer 11y agoThis was a cute article. I laughed at the end. Thank you for sharing this, it put a smile on my face. :)
- teen 11y agothis is extremely easy to do in flexbox. despite what people say it's actually very quick to pick up
- grumblestumble 11y ago.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } now just put it in a relatively positioned container and you're done. i thought this was common knowledge by now, i haven't used `table-cell` in years.
- inopinatus 11y agoIsn't this the construct that exhibits blurring problems due to subpixel alignment in Gecko / Webkit ?
- bleonard 11y agoFollow-up: Does anyone know how to best host this site? a) with less than 50 users all-time b) easily updated daily (blog-style) by a 7 year old c) is approximately free Wordpress with her custom theme seems to fail C. Github pages / Jekyll is failing B
- pazimzadeh 11y agoNot free, but relatively cheap: https://www.site44.com https://www.site44.com
- Rifu 11y agoA quick look through wordpress' offerings shows some nice plans for hosting that shouldn't be too expensive [0] [0] https://wordpress.org/hosting/ https://wordpress.org/hosting/
- paulcole 11y agoNearlyFreeSpeech can host a wordpress site with low traffic for little more than a penny a day.
- unknownknowns 11y agoWas going to comment this. Used NFS years ago and was incredibly happy with them, they're fantastic.
- paulcole 11y agoYeah, I have a handful of low-traffic sites with them and it's fantastic. For a little more functionality, I like ASmallOrange. My partner hosts her site/blog with them for $35/year and it's great, too.
- danso 11y agoI responded to you on Twitter but I would go for Tumblr. Easy to maintain, and makes it very easy to publish media-heavy posts...which, even if your daughter is the next J.K. Rowling in terms of enthusiasm for the written word, Tumblr hits the right mix of decent flexibility and dead simple UI. I maintained my own Wordpress site but ended up posting much more frequently to Tumblr. I now am basically 100% Jekyll and Middleman...but having tried teaching Github Pages to college students...I'm skeptical that it's easy enough for a child to hack around with and get the same amount of enjoyment and productivity that she would out of Tumblr or WordPress. (Apparently Ghost is pretty good too but I've never tried it)
- SimeVidas 11y agoTattoo “flexbox” on your hand :P
- throwaway000002 11y agoHas anybody, possibly, probably, an academic, given HTML+CSS a semantics? I'm thinking something like whatever minimal core would be considered the PCF of the web world.
- rimantas 11y agoCSS is about presentation, not semantics, that's the point of it. And the whole point of separation of concerns. So sad to see stuff like http://csszengarden.com/ http://csszengarden.com/ being forgotten and the whole web standards movement coming to nothing.
- pcunite 11y agoVery funny ... thanks for sharing.
- bbcbasic 11y agoAnd if you google 'vertical center div css' you will now find this page (in a news subsection). Try it. Ymmv.
- logicallee 11y agoWhy isn't this actually an easy, obvious part of CSS? It doesn't seem like there is anything that makes this more complicated to implement than anything else people use daily... it's also an obvious feature. Reasons?
- vayarajesh 11y agoA father-daughter moment of a techie :) your daughter see you as a hero when she learns more about vertical center and CSS in general
- nathan_f77 11y agoI love "display: flex" so much. I'm working on extensions for modern browsers, so I can use it everywhere. Makes everything so much easier. Also cases where you would normally use ".left { float: left; }" and ".right { float: right; }".