axchink axchink - 5 months ago 10
CSS Question

Unicorn-UI: Buttons text moves (possibly overlapping styles?)

Attaching js fiddle link here first js fiddle link here

I'm having a little difficult time trying to create a button using Unicorn UI Button library to open up modal window.

The problem I am encountering is the alignment of the text.

When my code is

<button class="button button-raised button-action button-circle button-extreme">Wireframe and Mockups</button>


The text is aligned properly as shown here

Correctly Shown

However, when I change the code by giving it a label so that I can have my modal window code working such as

<label for="window-1" button class="button button-raised button-action button-circle button-extreme">Wireframe and Mockups</button></label>


The text gets misaligned as shown.

Incorrect

I've tried changing the css styles in the buttons library as well as changing the css for the modal window, but I just cannot get the text alignment to stay the same when I apply the
"label for = "windows 1"
. Please help me what I am doing wrong.

hsh hsh
Answer

Add my-label class at the end of your css styles and add it to your label element classes like this:

.my-label{
   display:table-cell;
   vertical-align:middle;
}

<label for="window-1" button class="... my-label">Wireframe and Mockups</label>

if you don't like to add a new class you also can add those css rules to .button-raised.button-action css selector like this:

.button-raised.button-action {
    ...
    display: table-cell;
    vertical-align: middle;
}

I Also updated your Fiddle

Comments