- display:inline things work like text
<img>
elements are technically display:inline by default. But that's dumb- To center a display:inline element, put text-align:center on the parent
- width and height don't work on display:inline things (except for
<img>
, but that's special)
Normal flow: the "textiness" of the DOM -- the way in which it's like a Word doc: https://docs.google.com/document/d/1Kv4XZel4GACX2Pwi1bIs9KMlX6zMo2-O7q_NVyahvm8/edit
- it takes up a whole like, row on its own
- it always gets busted onto the next line
- you center it differently
- like display:inline
- except that width and height actually work even if it's not an image
- you center it just like display:inline things
- like display:inline, but by default if you don't set a width/height, it stretches to fit the contents
- basically it's in the normal flow
- if the thing you're trying to center is just text only, that text doesn't wrap, and the element is a set height, then you can set a
line-height
of that set height andvertical-align:middle;
on the element (or parent). (This is good for e.g. buttons) - otherwise, to vertically center arbitrary shit with a variable height, you can use display: table-cell and use display:table on the parent.
Next time: we'll talk about flexbox and when it'd be worth it to use that