CODEWITHSUNDEEP
htmlcss
John Kennedy
John Kennedy

Reputation: 13

How can i change text lable to right?

I have this checkbox that display left side but I want display in right side. How can I do ? I use this style but not work.

Image for describe my problem

label {
  display: block;
  text-align: right;
  margin-right: 1em;
}
<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

<div class="pretty p-icon p-curve p-jelly">
  <input type="checkbox">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull">   </i>

    <label style="text-align: right;">hi</label>

  </div>
</div>

Upvotes: 0

Views: 69

Answers (3)

Raquel Santos
Raquel Santos

Reputation: 110

John with two lines of code you can do that. See the changes I made. In HTML I put everything inside a section or div, if you prefer, with class name content. In CSS I wrote two lines of code to change that. For these things is good to use Flexbox. very easy and less code. Check below.

.content{
  display:flex;
  justify-content:flex-end;
}
<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

<section class='content'>
  <div class=" pretty p-icon p-curve p-jelly">
  
  <input type="checkbox">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull"></i>
    <label style="text-align: right;">hi</label>
  </div>
  
</div>
</section>

Hope this was helpful for you.

Upvotes: 1

mplungjan
mplungjan

Reputation: 178393

Try floating it 

div.pretty {
  text-align: right;
  margin-right: 1em;
  float: right;
}
<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
<div class="pretty p-icon p-curve p-jelly">
    <input type="checkbox" id="chk">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull">   </i>
    <label for="chk" style="text-align: right;">hi</label>
  </div>
</div>

Upvotes: 0

Ajanyan Pradeep
Ajanyan Pradeep

Reputation: 1132

Give id to the div like chbox 

<div class="pretty p-icon p-curve p-jelly" id="chbox">

and add the following properties to that id in css

#chbox {
  display: block;
    float:right;
  text-align: right;
  margin-right: 1em;
}

So the code will be:

#chbox {
  display: block;
  float: right;
  text-align: right;
  margin-right: 1em;
}
<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

<div class="pretty p-icon p-curve p-jelly" id="chbox">
  <input type="checkbox">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull">   </i>

    <label style="text-align: right;">hi</label>

  </div>
</div>

Upvotes: 0

Related Questions