简体   繁体   中英

I'm having trouble centering a checkbox and radio buttons within a <td>

i'm having trouble centering my checkboxes and radio buttons within a td. Ideally I would want the radio buttons to be left of the label, but it just hasn't been working the way I want it.

Here is a fiddle: http://jsfiddle.net/3s4pcu3w/

Current CSS:

    #justification {
      display: none;
    }

    #public-school-eligibility {
      text-align: center;
      position: static;
    }

    #public-school-eligibility input, select {
      margin-top: 0px;
      width: 55px;
      margin: 5px;
    }

    #public-school-eligibility td {
      vertical-align: text-top;
      text-align: center;
    }

html:

    <div class='container'>
          <div class='content'>
            <div id='public-school-eligibility'>
              <div class='span12'>
                <table border='5'>
                  <thead class='te'>
                    <tr>
                      <th>School Name</th>
                      <th>School #</th>
                      <th>Grade Code</th>
                      <th>School Type</th>
                      <th>Neglected and Delinquent</th>
                      <th>New School</th>
                      <th>Reported 2014-2015 Number of Children </th>
                      <th>Reported 2014-2015 Number of Children</th>
                      <th>Reported 2014-2015 Percent of Children</th>
                      <th>2014-2015 Number of Children</th>
                      <th>2014-2015 Number of Children</th>
                      <th>2014-2015 Percent of Children</th>
                      <th>Selection Code*</th>
                      <th>Select for Split-Funding</th>
                      <th>Program Type</th>
                      <th>2014-2015 </th>
                      <th>2014-2015 </th>
                      <th>Community</th>
                      <th>Parental </th>
                    </tr>
                  </thead>
                  <form action="/school_eligibility_data" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="BRbQ4QP4N8DnudJDKiYmFGTboURhv+xr6rIGEl7YTXsnb44HK9NGT9WsHTo9yhAMEdQKa7qhirMB+ryZJSsvXA==" />      <tr class='school' data-id='2035' id='school_2035'>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td>
                          </td>
                          <td></td>
                          <input value="3" autosave="true" data-attribute="public_school_eligibility_survey_id" type="hidden" name="school_eligibility_data[public_school_eligibility_survey_id]" id="school_eligibility_data_public_school_eligibility_survey_id" />
                          <input value="2035" autosave="true" data-attribute="school_id" type="hidden" name="school_eligibility_data[school_id]" id="school_eligibility_data_school_id" />
                          <td>
                            <input id="children_attending_2035" autosave="true" data-percentage="true" data-attribute="children_attending" class="low-income-percentage" data-id="2035" type="number" value="318" name="school_eligibility_data[children_attending]" />
                          </td>
                          <td>
                            <input id="children_from_low_income_2035" autosave="true" data-percentage="true" data-attribute="children_from_low_income" class="low-income-percentage" data-id="2035" type="number" value="305" name="school_eligibility_data[children_from_low_income]" />
                            Use 1.6 Multiplier
                            <input type="checkbox" name="multiplier" id="test" value="1" />
                          </td>
                          <td>
                            <div class='percentage' id='percentage_2035'>
                              99
                            </div>
                          </td>
                          <td>
                            <div autosave class='selection_code' data-attribute='selection_code' data-id='2035' id='select_2035'>
                              <select name="school_eligibility_data[selection_code]" id="school_eligibility_data_selection_code"><option value="A">A</option>
                              <option value="B">B</option>
                              <option value="C">C</option>
                              <option value="D">D</option>
                              <option selected="selected" value="E">E</option>
                              <option value="F">F</option>
                              <option value="G">G</option>
                              <option value="H">H</option>
                              <option value="I">I</option>
                              <option value="J">J</option>
                              <option value="K">K</option>
                              <option value="L">L</option></select>
                            </div>
                          </td>
                          <td>
                            <div class='center'>
                              <input name="school_eligibility_data[split_funding]" type="hidden" value="false" /><input id="split_funding_2035" data-attribute="split_funding" type="checkbox" value="true" checked="checked" name="school_eligibility_data[split_funding]" />
                            </div>
                          </td>
                          <td>
                            <label for="program_type_SW">Sw</label>
                            <input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="SW" id="school_eligibility_data_program_type_sw" />
                            <br>
                            <label for="program_type_TA">Ta</label>
                            <input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="TA" id="school_eligibility_data_program_type_ta" />
                            <br>
                            <label for="program_type_N/A">N/a</label>
                            <input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="N/A" id="school_eligibility_data_program_type_na" />
                          </td>
                          <td>
                            <input id="per_pupil_allocation_2035" autosave="true" data-attribute="per_pupil_allocation" type="number" value="33" name="school_eligibility_data[per_pupil_allocation]" />
                          </td>
                          <td></td>
                          <td>
                            <input id="community_eligibility_provision_2035" autosave="true" data-attribute="community_eligibility_provision" type="number" value="333" name="school_eligibility_data[community_eligibility_provision]" />
                          </td>
                          <td>
                            <input id="parental_involvement_reservations_2035" autosave="true" data-attribute="parental_involvement_reservations" type="number" value="33" name="school_eligibility_data[parental_involvement_reservations]" />
                          </td>
                          <tr>
                            <td class='justification' colspan='12' data-id='2035' id='justification_2035'>
                              * You have selected one of the following Selection Codes: E, F, H, K, or L. Provide a justification below.
                              <textarea autosave="true" data-attribute="justification" name="school_eligibility_data[justification]" id="school_eligibility_data_justification">
    </textarea>
                            </td>
                          </tr>
                        </tr>

Remove this width:55px from #public-school-eligibility input, select and put this in your css code

#public-school-eligibility td p{
  display:inline;
}

I used p tag, but you may use label too instead.

Here is the jsfiddle http://jsfiddle.net/3s4pcu3w/5/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM