CSS 不适用于表 td

Question

我正在使用 ASP.NET，它使用所有默认的 javascript 库，如 Bootstrap、jQuery 和 ...

我想自定义由 Visual Studio 生成的 EDIT 视图。我想为表格单元格应用一种样式，但我的 css 不起作用，并且下拉菜单不在中间垂直

我尝试遵循 CSS，但它们都不起作用

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

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

#tb_dataentry 是我的表的 id。

我还使用了middle 而不是auto 并使用了!important 这个词，但没有运气。

如果我对每个单独的 TD 使用相同的样式，它会起作用，但我想在一个地方这样做。

这是我的表格的html

<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>

编辑：编译的 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 不是 vertical-align 属性的有效值。默认值为initial

你可以在这里看到有效值http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

可以通过编辑 .form-group 行为来完成您的案例对齐 - 它应该具有 inline-block 显示模式，在这种情况下 vertical-align 属性可以处理其行为

<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>