CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to make text vertical align center next to a checkbox?

input[type="checkbox"] {
  display: none;
}

span:before {
  font-family: "FontAwesome";
  font-style: normal;
  content: 'O';
  margin-right: 3px;
  font-size: 30px;
 }

input[type="checkbox"]:checked ~ span:before {
  content: 'Z';
}
<label>
<input type="checkbox"/>
<span>Text</span>
</label>
Is any way can make text in the middle next to css content?

Upvotes: 2

Views: 1905

Answers (5)

id3vz
id3vz

Reputation: 480

Just add 


    vertical-align:middle;

to 


    span:before {
      font-family: "FontAwesome";
      font-style: normal;
      content: 'O';
      margin-right: 3px;
      font-size: 30px;
      vertical-align:middle;
     }

Upvotes: 2

Ayush Sharma
Ayush Sharma

Reputation: 2107

Just add vertical-align:sub to span:before

Here is js fiddle link - Fiddle

span:before {
 font-family: "FontAwesome";
 font-style: normal;
 content: 'O';
 margin-right: 3px;
font-size: 30px;
 vertical-align:sub;
}

Upvotes: 0

Luke Clynes
Luke Clynes

Reputation: 195

Setting the display of the span to flex and aligning the items center would work.

input[type="checkbox"] {
  display: none;
}

label span {
  display: flex;
  align-items: center;
}

span:before {
  font-family: "FontAwesome";
  font-style: normal;
  content: 'O';
  margin-right: 3px;
  font-size: 30px;
 }

input[type="checkbox"]:checked ~ span:before {
  content: 'Z';
}
<label>
<input type="checkbox"/>
<span>Text</span>
</label>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use display: flex and align-items: center on span element.

span {
  display: flex;
  align-items: center;
}
input[type="checkbox"] {
  display: none;
}
span:before {
  font-family: "FontAwesome";
  font-style: normal;
  content: 'O';
  margin-right: 3px;
  font-size: 30px;
}
input[type="checkbox"]:checked ~ span:before {
  content: 'Z';
}
<label>
  <input type="checkbox" />
  <span>Text</span>
</label>

Upvotes: 4

Miquel Canal
Miquel Canal

Reputation: 1121

You can add the following into the span:before element:

span:before {
   vertical-align: middle;
   position: relative;
}

Upvotes: 1

Related Questions