Text alignment in button's label

I’m trying to make the button label text appear underneath the image using CSS. I can’t figure out whats wrong with my CSS code or if I should be tackling this issue from a different angle. Suggestions or thoughts?

:host {
    background:url('
data:image/png;base64,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
') no-repeat;
background-size: 64px 64px;
background-color: rgb(192,192,192,0.3);
background-position: center center;
background-size:30%;
border-radius:3px;
font-size:75%;
vertical-align: top;
display: inline-block;
text-align: center;
}
.label {
display: block;
vertical-align: bottom;
}

Here is a pic of it now. I can get it on top but not on bottom?

image

Replace the .label{} with this one:

.label {
  align-items:flex-end;
  /* adjust the following */
  padding-bottom: 5rem;
}
1 Like

Sorry to hijack the post but is it possible to align to the right? Say I want “50%” to be at the bottom right of the button. I’ve tried using text-align but it didn’t work.

Also, is it possible to make the text invisible without disabling the label (I want to keep the background)

Thanks!

@iddqd

.label {
  justify-content: flex-end;
  color: transparent;
}
2 Likes

Thank you Jean! This worked perfectly. Now I have a follow-up question.

When using modals with push buttons in the modal. When I use this code to adjust the text “.label”. This code affects the text for all the buttons inside the modal including the modal label itself. How do I target specifically the modal label and the button’s labels differently?

> .label will target direct children of the widget element only. (reference: https://css-tricks.com/child-and-sibling-selectors/)

1 Like

Thanks! I’m learning so much and really appreciate you pointing me to articles with full explanations.