Text left align issue

Question

I'm using remodal.js ( https://github.com/VodkaBears/Remodal ) to create a modal: http://jsfiddle.net/j4wnov5z/ .

Basically, I want to left-align some elements, but it seems I can't.

For example, I tried to left align the label in the modal like:

.remodal label {
   text-align: left !important;
}

but it didn't work? I took away text-align: center; in the wrapper, but that caused the modal to not be centered anymore?

Answer 1

[..] for some reason <label> doesn't work

It's because the label element is inline by default. Thus, its width is determined by its content, in this case the text. If the width of the element is determined by the text, the text won't appear to be centered.

You could change the display of the label element to block . In doing so, it will have a width of 100% and the text will be aligned to the left.

Updated Example

.remodal label {
   display: block;
   text-align: left;
}

Answer 2

If you want to target the H1 in the modal try adding a rule like this to the CSS

.remodal-wrapper .remodal h1 {
    text-align: left;
}

I have updated your fiddle here - http://jsfiddle.net/aqobvdou/