What is the difference between "text-center" and "flex flex-center"?
-
When reviewing the various table styles, I noticed that the template for masonry-style grid is
<template v-slot:item="props"> (...) <q-card-section class="text-center"> (...) <q-card-section class="flex flex-center" :style="{ fontSize: props.row.calories + 'px' }"> (...) </template>
How are these classes different (they both aim at centering one text element)? Which one should be used when?
-
@wpq text-center like the class name suggests are for texts inside an element using text-align css, flex are for containers such as divs/elements and etc… to achieve a certain layout.
-
thanks @metalsadman - I did not notice that under the former there was pure text, and under the latter a
div
-
@wpq in the docs; former https://quasar.dev/style/typography#CSS-Helper-Classes, the latter https://quasar.dev/layout/grid.