How to position a button in the middle of the card

[Darshan S]

I have used
<div class=“button content-center”>
<button class=“btn btn-primary btn-block primary content-center” type=“submit”>Login</button>
</div>
inside a card. But both content-center and text-center are not working. How to make button position in center?

[rstoenescu]

If you want your button centered outside of QCardActions, then use Flex CSS helper classes. Example:

<div class="row justify-center">
   <q-btn ........
</div>

[spectrolite]

I post this here because the questions are very much related. It’s also a question of alignment of a button, inside of a QCard.

Someone asked on gitter how to replicate this 0.13 example of button placement with 0.14 (we’re talking about the round blue button, I think it was @tiago_startt ), but I could not get to that result either:

• using the code below, inspired by the 0.13 way of doing it (but with 0.14 syntax), results in the button being placed BELOW the media
• using overlays places the button ON the media (and adds a dark overlay which is not needed in this case)
  Is there a simple way of getting the button ACROSS both areas like before ? (as recommended by material guidelines for actions that see both areas interact)

tried with this (and then tried adding overlays)

<q-card-media>
  <img src="placeholder.png" height="120px">
  <q-btn round color="primary" class="pull-right on-left">P</q-btn>
</q-card-media>

[spectrolite]

@rstoenescu the coolest solution imho would be a quatuor of CC helper classes called say align-across-<direction>, direction being one of top, bottom, left or right.
And even if it worked only in QCards (or with the same kind of slot syntax as overlays) it would already be a great tool, not to mention it would allow people to port their apps without UI changes nor nasty manual CSS tricks.

Nevertheless, if you have a CSS trick to achieve that, I’ll gladly add some local styling to make it work in the meantime.

[rstoenescu]

On the very next Card section after QCardMedia, whichever that is (QCardTitle in the next case, but can be ANY other Card sub-component):

<!-- Adding "relative-position" so we can position the round button -->
<q-card-title class="relative-position">
  <q-btn round color="primary" icon="place" class="absolute" style="top: 0; right: 8px; transform: translateY(-50%);" />
  .....
</q-card-title>

Note that “transform” property needs vendor prefixes to work with older browsers, so it might be an idea to use a CSS class instead, as all app CSS code goes through Autoprefixer

[spectrolite]

Excellent, thank you !