Text-Align of a Label only

Question

Text-Align of a Label only

Navigation

#1 by (1 votes)

2

On a ".cshtml" web page I have several labels declaring the form-horizontal class and the control-label class. By default, these classes align right in my project, ie .. implement the text-align: right property, but I need to change the value of this property to only two cases, and I'm not getting, has no effect.

What I've already tried:

CSS

.form-horizontal .control-label .text-left{
    text-align: left !important;
}

LABEL

    <div class="col-md-6">
        @Html.LabelFor(x => x.observacoes, "Observações Internas:", new { @class = "control-label text-left" })
    </div>

I have also tried assigning ID and using "#" in the CSS class, without success and assigning directly to the component's Html attributes, even with "! important" but did not work.

c# css razor

asked by anonymous 16.05.2018 / 18:41

1 answer

Make the Average in Javascript Get all the columns of all the tables that contain a text

score 1 · Accepted Answer

I think this is your problem, but if not, let me remove the answer.

The original class in Bootstrap's CSS is so, notice that it's within @media , maybe that's your problem:

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right; /* aqui define o alinhamento */
    }
}

On small screens, smaller than 768px, the original style of label changes to:

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

So check if you're setting the style in the right place.

Given this, I believe that you solve your problem like this , create the class .form-horizontal .control-label.text-left of the form below and see if it works!

@media (min-width: 768px) {
    .form-horizontal .control-label.text-left {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: left; /* alinhado a esquerda */
    }
}
label.text-left {
    text-align: left; /* alinhado a esquerda */
}