align the input field and checkboxes in the center of label

Question

I have a number of labels and their textfields and their corresponding checkbox like below.

I want to align them in the center and proper spacing between them.

Here's the fiddle where I am trying.

For my screen at the moment, there's no distance between the text fields.

    <div class="col-sm-4">
                <table>
                    <tbody><tr>
                        <td><label for="">Design number</label></td>
                        <td><input type="text" name="Design number" value="SK123"></td>
                    </tr>

                    <tr>
                        <td><label for="">Price</label></td>
                        <td><input type="text" name="Price" value="500"><br><br></td>
                    </tr>

                    <tr>
                        <td><label for="">Never Out Of Stock</label></td>
                        <td><label><input type="checkbox" value=""><br><br></label></td>
                    </tr>

                     <tr>
                        <td><label for="">Pattern</label></td>
                        <td>
                         <label> <input type="checkbox" value="">Stripes<br></label>
       <label><input type="checkbox" value="">Checks<br></label>
       <label><input type="checkbox" value="">Prints<br></label>
       <label><input type="checkbox" value="">Solid<br></label>
                        </td>
                    </tr>

                    <tr>
                        <td><label for="">Color</label></td>
                        <td>
                        <br><br>
                         <label><input type="checkbox" value="">White<br></label>
       <label><input type="checkbox" value="">Blue<br></label>
       <label><input type="checkbox" value="">Green<br></label>
       <label><input type="checkbox" value="">Red<br></label>
       <label><input type="checkbox" value="">Yellow<br></label>
         </td>
                    </tr>


                    <tr>
                        <td><label for="">Occasion</label></td>
                        <td>
                        <br><br>
                         <label><input type="checkbox" value="">Casual<br></label>
       <label><input type="checkbox" value="">Fancy<br></label>
       <label><input type="checkbox" value="">Office<br></label>
         </td>
                    </tr>

                    <tr>
                        <td><label for="">Fabric</label></td>
                        <td>
                        <br><br>
                         <label><input type="checkbox" value="">Silk<br></label> 
       <label><input type="checkbox" value="">Denim<br></label> 
       <label><input type="checkbox" value="">Velvet<br></label> 
         </td>
                    </tr>

                </tbody>
       </table>
            </div>

Remove all the `br` tags, add `bootstrap`'s `table` class to `` and check this link to **[align label to the `checkbox` center](http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers?answertab=votes#tab-top)** — Guruprasad J Rao, Jan 07 '16 at 13:16

Baro · Accepted Answer · 2016-01-07T13:16:31.317

1

Here a good (I hope) format of your code:

table {
  width:800px;
}
table td {
  width:70%;
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom:solid 1px #dddddd;

  /* text-align: center; <---- If you want all aligned to the center. */
}
table td:first-child {
  width:30%;
}
label {
  min-width:75px;
  margin-left:10px;
}

input[type="checkbox"] {
  margin-right:5px;
}

I have removed the "br" tag and add spaces.

The JSFiddle

edited Jan 07 '16 at 13:16

answered Jan 07 '16 at 13:10

Baro

5,300
2
17
39

why the `table tr {}` empty ? This is almost exactly what I am trying to achieve – Suraj Jan 07 '16 at 13:14

score 0 · Answer 2 · answered Jan 07 '16 at 13:06

<div class="col-sm-4">
  <table>
    <tbody>
      <tr>
        <td><label for="">Design number</label></td>
        <td><input type="text" name="Design number" value="SK123"></td>
      </tr>
      <tr>
        <td><label for="">Price</label></td>
        <td><input type="text" name="Price" value="500"></td>
      </tr>
      <tr>
        <td><label for="">Never Out Of Stock</label></td>
        <td><input type="checkbox" value=""></td>
      </tr>
      <tr>
        <td><label for="">Pattern</label></td>
        <td>
          <label><input type="checkbox" value="">Stripes</label>
                    <label><input type="checkbox" value="">Checks</label>
                    <label><input type="checkbox" value="">Prints<br></label>
                    <label><input type="checkbox" value="">Solid<br></label>
        </td>
      </tr>
      <tr>
        <td><label for="">Color</label></td>
        <td>
          <label><input type="checkbox" value="">White<br></label>
                    <label><input type="checkbox" value="">Blue<br></label>
                    <label><input type="checkbox" value="">Green<br></label>
                    <label><input type="checkbox" value="">Red<br></label>
                    <label><input type="checkbox" value="">Yellow<br></label>
                </td>
      </tr>
      <tr>
        <td><label for="">Occasion</label></td>
        <td>
          <label><input type="checkbox" value="">Casual<br></label>
                    <label><input type="checkbox" value="">Fancy<br></label>
                    <label><input type="checkbox" value="">Office<br></label>
                </td>
      </tr>
      <tr>
        <td><label for="">Fabric</label></td>
        <td>
          <label><input type="checkbox" value="">Silk<br></label> 
                    <label><input type="checkbox" value="">Denim<br></label> 
                    <label><input type="checkbox" value="">Velvet<br></label> 
                </td>
      </tr>
    </tbody>
  </table>
</div>

Look fiddle : https://jsfiddle.net/4xrfw842/1/

score 0 · Answer 3 · answered Jan 07 '16 at 13:07

Edit your html code

<div class="col-sm-4">
                <table>
                    <tbody><tr>
                        <td><label for="">Design number</label></td>
                        <td><input type="text" value="SK123" name="Design number"></td>
                    </tr>

                    <tr>
                        <td><label for="">Price</label></td>
                        <td><input type="text" value="500" name="Price"><br><br></td>
                    </tr>

                    <tr>
                        <td><label for="">Never Out Of Stock</label></td>
                        <td><label><input type="checkbox" value=""></label></td>
                    </tr>

                     <tr>
                        <td><label for="">Pattern</label></td>
                        <td>
                            <label> <input type="checkbox" value="">Stripes<br></label>
                            <label><input type="checkbox" value="">Checks<br></label>
                            <label><input type="checkbox" value="">Prints<br></label>
                            <label><input type="checkbox" value="">Solid<br></label>
                        </td>
                    </tr>

                    <tr>
                        <td><label for="">Color</label></td>
                        <td>

                            <label><input type="checkbox" value="">White<br></label>
                            <label><input type="checkbox" value="">Blue<br></label>
                            <label><input type="checkbox" value="">Green<br></label>
                            <label><input type="checkbox" value="">Red<br></label>
                            <label><input type="checkbox" value="">Yellow<br></label>
                        </td>
                    </tr>


                    <tr>
                        <td><label for="">Occasion</label></td>
                        <td>

                            <label><input type="checkbox" value="">Casual<br></label>
                            <label><input type="checkbox" value="">Fancy<br></label>
                            <label><input type="checkbox" value="">Office<br></label>
                        </td>
                    </tr>

                    <tr>
                        <td><label for="">Fabric</label></td>
                        <td>

                            <label><input type="checkbox" value="">Silk<br></label> 
                            <label><input type="checkbox" value="">Denim<br></label> 
                            <label><input type="checkbox" value="">Velvet<br></label> 
                        </td>
                    </tr>

                </tbody></table>
            </div>

https://jsfiddle.net/4xrfw842/5/

align the input field and checkboxes in the center of label

3 Answers3