CODEWITHSUNDEEP
htmlcssmaterial-designmaterialize
franchyze923
franchyze923

Reputation: 1200

Centering checkbox/radio button in Materialize CSS

I'm having trouble getting checkboxes to center align using Materilize CSS. 

<div class="center-align">

    <h5>Select Value </h5>

    <form action="#" >

            <p class="center-align">
              <input class="filled-in" name="group1" type="checkbox" id="1">
              <label for="1" class="teal-text text-lighten-2" >First</label>
            </p>
            <p class="center-align">
              <input  class="filled-in"name="group1" type="checkbox" id="2">
              <label for="2" class="teal-text text-lighten-2">Second</label><span></span>
            </p>
    </form>

enter image description here

This results in the checkboxes being aligned in the center, but offset from each other. If the labels are exactly the same, they match.

I've tried adding the center-align class to the <div> , <form>, <input> and the <p> but nothing is working as I'd expect.

Upvotes: 0

Views: 876

Answers (1)

franchyze923
franchyze923

Reputation: 1200

Was able to acheive desired result by adding this css

<style>
      label{  
          left: 50%;
        }   
</style>

Upvotes: 1

Related Questions