Card alignment - how to do it correctly?

Configuration Frontend
1

having hard time aligning cards/buttons …
Have question for whats the right way to align cards,
is there a way to properly align so it will work for both mobile and browser?
for example align to center.

i.e for below button-card
I use " - margin: 0px 0px 0px 180px" but im sure there’s a more reasonable way to do it.

type: horizontal-stack
cards:
  - type: custom:button-card
    color_type: card
    icon: mdi:cctv
    tap_action:
      action: navigate
      navigation_path: /lovelace-avimush/7
    styles:
      card:
        - background-color: '#000098'
        - color: ivory
        - animation: blink 2s ease infinite
        - width: 100px
        - height: 100px
        - border-radius: 10px
        - margin: 0px 0px 0px 180px
        - padding: 0px 0px
2

use a mix of horizontal-stack’s and vertical-stack’s

2 Likes
3

or the grid card which does everything they do and a little bit more :slight_smile:

2 Likes
4

@aceindy - thanks ,
Tried - didnt work:

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        color_type: card
        icon: mdi:cctv
        tap_action:
          action: navigate
          navigation_path: /lovelace-avimush/7
        styles:
          card:
            - background-color: '#000098'
            - color: ivory
            - animation: blink 2s ease infinite
            - width: 100px
            - height: 100px
            - border-radius: 10px

@eggman Thanks ,
Tried it but didn’t get different result,
Maybe it’s happened as i use Mushroom?

type: grid
square: false
cards:
  - type: custom:button-card
    color_type: card
    icon: mdi:cctv
    tap_action:
      action: navigate
      navigation_path: /lovelace-avimush/7
    styles:
      card:
        - background-color: '#000098'
        - color: ivory
        - animation: blink 2s ease infinite
        - width: 100px
        - height: 100px
        - border-radius: 10px

I thought it would be done simply by adding some alignment tag and not require tricks…

5

Both of the suggestions assume your requirement was to align multiple cards with each other.

I’m not quite sure what you’re trying to do?

6

@eggman

I’m using Mushroom ,
And when adding a button as below i can’t find reasonable way
to place it in the center of the background :

image
image1213×892 34.5 KB

The only i way could find is by adding to styles:

    - margin: 0px 0px 0px 180px

But in different screens the button shift from the middle,
my question is how do i place card in absolute position so it will align it will align same way on different screen.

7

If that’s your yaml (and much better to post code rather than pictures of code), then the custom:button-card is sitting in a 3 column grid, so it will appear to the left of centre. That’s what grid card does. You might even have that nested in a horizontal-stack card?

If you’re using the standard masonry layout type and put one card in a view it should be horizontally centred automatically (unless there’s something weird about custom:button-card, I don’t use it).

If you want one column of cards, all horizontally centred, either put them in a vertical-stack or a single column grid card.

So we can see what you’re actually doing, go to edit mode, then the raw configuration editor (top right menu). Copy everything from there and paste it here. Before and after the code put three backticks to make it readable. If you can’t find the back tick, CTRL+E should insert them along with a placeholder for you to paste into.