4 ms·
The answer to (a) (along with many other things) is to use Flexbox: .my-container { display: flex; justify-content: center; align-items: center;
by brundolf 6y ago
The answer to (a) (along with many other things) is to use Flexbox:
.my-container {
display: flex;
justify-content: center;
align-items: center;
}
This should work for (b) as long as the height isn't in terms of a percentage:
.my-video {
--my-video-height: 120px;
height: var(--my-video-height);
width: calc(var(--my-video-height) * 16/9);
}
- pineconewarrior 6y agoYou can also use grid and the place-content shorthand! These things are getting better. CSS was a nightmare in the 2000s.
- brundolf 6y agoEven I'll admit that Grid is complicated. It serves a valid use-case, but it's honestly a very rare one in my experience and the learning curve is steep
- innocenat 6y agoPersonally I love CSS Grid. It allows me to move contents around easily from Desktop to Mobile view just by defining different grid-template-areas.
- tsujp 6y agoGrid is nice but overused in my opinion. However, at the end of the day whatever gets the job done and is sane is a valid solution in my eyes but I prefer to think of grid as anything requiring centering on two-axis and/or macroscopic to the task at hand. So for instance I would do the responsive page layout in grid, probably. Then I would do positioning the elements within a article or section with flexbox.
- pault 6y agoThis is the intended use of grid and flexbox for sure. Unfortunately most developers seem to abuse either one or the other.
- dheera 6y agoWow thanks, I'll try this! (for (a) I was using table->table-row->table-cell to get vertically centered text before).