CSS is not working for table td

Question

I'm using ASP.NET which uses all default javascript libraries like Bootstrap, jQuery and ...

I'm ty\rying to customize the EDIT View, generated by Visual Studio. I want to apply a style for table cells but my css is not working and the dropdown is not vertically in the middle

I tried following CSS, but none of them worked

<style type="text/css">
    #tb_dataentry td {
        vertical-align: auto;
    }
</style>

<style type="text/css">
    td {
        vertical-align: auto;
    }
</style>

#tb_dataentry is the id of my table.

I also used middle instead of auto and used !important word but no luck.

If I use the same style for each individual TD, it works, but I want to do that in one place.

This is the html of my table

<table id="tb_dataentry">
    <tr>
        <td style="vertical-align:auto">
            @Html.LabelFor(model => model.PropertyType, htmlAttributes: new { @class = "control-label col-md-2" })
        </td>
        <td>
            <div class="form-group">
                <div class="col-md-10">
                    @Html.EnumDropDownListFor(model => model.PropertyType, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.PropertyType, "", new { @class = "text-danger" })
                </div>
            </div>
        </td>

Edit: Compiled HTML

...... many things above this line
<style type="text/css">
    td {
        vertical-align: middle;
    }
</style>

<!-- Start page content -->
<section id="page-content" class="page-wrapper">
    <div class="about-sheltek-area ptb-115">
        <div class="container">
            <div class="row">

                <form action="/ManageProperties/Edit/1" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value="3_tLe9pLOu0CiWg8X81ivfdT0rjyvb4XnCIyAeR0k8uoP8FE_3hMA3xtZh2igj_9Q3SMGBb5WxdxEkNeNkZrTP-WeGpGugHOKVZ7Zxa_8n81" />
                    <div class="form-horizontal">
                        <h4>Property</h4>
                        <hr />

                        <input data-val="true" data-val-number="The field PropertyId must be a number." data-val-required="The PropertyId field is required." id="PropertyId" name="PropertyId" type="hidden" value="1" />

                        <table id="tb_dataentry">
                            <tr>
                                <td>
                                    <label class="control-label col-md-2" for="PropertyType">PropertyType</label>
                                </td>
                                <td>
                                    <div class="form-group">
                                        <div class="col-md-10">
                                            <select class="form-control" data-val="true" data-val-required="The PropertyType field is required." id="PropertyType" name="PropertyType">
                                                <option value="0">Apartment</option>
                                                <option selected="selected" value="1">Condo</option>
                                                <option value="2">SingleFamily</option>
                                                <option value="3">MultiFamity</option>
                                                <option value="4">Villa</option>
                                                <option value="5">Suite</option>
                                            </select>
                                            <span class="field-validation-valid text-danger" data-valmsg-for="PropertyType" data-valmsg-replace="true"/>
                                        </div>

Answer 1

auto is not valid value for vertical-align property. default value is initial

you can see valid values here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

for your case alignment could be done by editing .form-group behavior - it should have inline-block display mode, in this case vertical-align property can handle its behavior

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
#tb_dataentry td {
    vertical-align: middle;
  border: 1px solid red;
}

.form-group {
    margin-bottom: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

.control-label {
    padding-top: 0 !important;
      margin-bottom: 0 !important;
}
</style>

<!-- Start page content -->
<section id="page-content" class="page-wrapper">
  <div class="about-sheltek-area ptb-115">
    <div class="container">
      <div class="row">

        <form action="/ManageProperties/Edit/1" method="post">
          <input name="__RequestVerificationToken" type="hidden" value="3_tLe9pLOu0CiWg8X81ivfdT0rjyvb4XnCIyAeR0k8uoP8FE_3hMA3xtZh2igj_9Q3SMGBb5WxdxEkNeNkZrTP-WeGpGugHOKVZ7Zxa_8n81" />
          <div class="form-horizontal">
            <h4>Property</h4>
            <hr />

            <input data-val="true" data-val-number="The field PropertyId must be a number." data-val-required="The PropertyId field is required." id="PropertyId" name="PropertyId" type="hidden" value="1" />

            <table id="tb_dataentry">
              <tr>
                <td>
                  <label class="control-label col-md-2" for="PropertyType">PropertyType</label>
                </td>
                <td>
                  <div class="form-group">
                    <div class="col-md-10">
                      <select class="form-control" data-val="true" data-val-required="The PropertyType field is required." id="PropertyType" name="PropertyType">
                        <option value="0">Apartment</option>
                        <option selected="selected" value="1">Condo</option>
                        <option value="2">SingleFamily</option>
                        <option value="3">MultiFamity</option>
                        <option value="4">Villa</option>
                        <option value="5">Suite</option>
                      </select>
                      <span class="field-validation-valid text-danger" data-valmsg-for="PropertyType" data-valmsg-replace="true" />
                    </div>