How to work with CSS labels

Asked

Viewed 3,313 times

0

When we use attributes such as Label the text is written from left to right. Can we change that? Make the text start for example from the middle to the sides or from right to left ?

Example:

----> Left to right

|MY TEXT ----|

How accurate (+ is the center)

<---- ---->

| Ipan + Ema |

or

<<<<<< Right to Left

| ---- MY TEXT|

Is that even possible? Thank you !

  • I would like to do this without encompassing in a div and use text align certer or Right...

  • 1

    It was not very clear the purpose. Post the code you already have so far.

2 answers

1

I did not understand if your question is about alignment or orientation in writing. I will answer both then.

ALIGNMENT

Align a <label> to the left:

<div style="width:100%;text-align:left">
    <label>MEU TEXTO</label>
</div>

Align a <label> centralized:

<div style="width:100%;text-align:center">
    <label>MEU TEXTO</label>
</div>

Align a <label> on the right:

<div style="width:100%;text-align:right">
    <label>MEU TEXTO</label>
</div>

See demonstration here.

ORIENTEERING

Right to left:

<div style="direction:ltr;">
    <label>MEU TEXTO</label>
</div>

Left to right:

<div style="direction:rtl;">
    <label>MEU TEXTO</label>
</div>

See demonstration here.

0

I don’t quite understand but from what I understand you want this:

            label{display:block;}
            form{width: 200px;border: 3px solid #4e4e4e;padding: 15px 15px;border-radius: 3px;}
            label#label-01{text-align: left;}
            label#label-02{text-align: right;}
            label#label-03{text-align: center;}
            input{width: 100%;}
        <form action="">
            <label for="" id="label-01">Label 01</label>
            <input type="text">
            <br><br>
            <label for="" id="label-02">Label 02</label>
            <input type="text">
            <br><br>
            <label for="" id="label-03">Label 03</label>
            <input type="text">
            <br><br>
            <button>Enviar</button>
        </form>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.