格式化百里香叶表标题，垂直对齐

Question

无法正确格式化百里香叶头。 -第一个问题是标题中的“垂直对齐”文本。我将其设置为“中间”，但是它不起作用。 -第二个问题是两个按钮并排放置

更精确地附加ss。你能看看吗？

  <table class="table table-md table-bordered">
        <tr style="text-align: center; vertical-align: middle">
            <th scope="col">No</th>
            <th scope="col">Sales price</th>
            <th scope="col">Down Payment</th>
            <th scope="col">Length of employment</th>
            <th scope="col">Monthly income</th>
            <th scope="col">Monthly commitment</th>
            <th scope="col">First name</th>
            <th scope="col">Last name</th>
            <th scope="col">Phone number</th>
            <th scope="col">Status</th>
            <th scope="col">Activity</th>
        </tr>

        <tbody>
        <tr th:each="tempLoan : ${loans}">
            <td th:text="${tempLoan.id}"/>
            <td th:text="${tempLoan.salesPrice}"/>
            <td th:text="${tempLoan.downPayment}"/>
            <td th:text="${tempLoan.lengthOfEmployment}"/>
            <td th:text="${tempLoan.monthlyIncome}"/>
            <td th:text="${tempLoan.monthlyCommitment}"/>
            <td th:text="${tempLoan.firstName}"/>
            <td th:text="${tempLoan.lastName}"/>
            <td th:text="${tempLoan.phoneNumber}"/>
            <td th:text="${tempLoan.status}"/>
            <td>
                <div sec:authorize="hasAnyRole('ROLE_EMPLOYEE', 'ROLE_MANAGER')">
                    <a th:href="@{/loans/confirm-form(loanId=${tempLoan.id})}"
                       class="btn btn-info btn-sm">
                        Update
                    </a>
                </div>
                <div sec:authorize="hasRole('MANAGER')">
                    <a th:href="@{/loans/delete(loanId=${tempLoan.id})}"
                       class="btn btn-danger btn-sm">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

Answer 1

您的垂直对齐中间被添加到错误的元素。尝试像这样定位th：

.table tr th {
  vertical-align: middle;
}

提琴：

.table tr th {
  vertical-align: middle;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-md table-bordered">
  <tr style="text-align: center; vertical-align: middle">
    <th scope="col">No</th>
    <th scope="col">Sales price</th>
    <th scope="col">Down Payment</th>
    <th scope="col">Length of employment</th>
    <th scope="col">Monthly income</th>
    <th scope="col">Monthly commitment</th>
    <th scope="col">First name</th>
    <th scope="col">Last name</th>
    <th scope="col">Phone number</th>
    <th scope="col">Status</th>
    <th scope="col">Activity</th>
  </tr>

  <tbody>
    <tr th:each="tempLoan : ${loans}">
      <td th:text="${tempLoan.id}" />
      <td th:text="${tempLoan.salesPrice}" />
      <td th:text="${tempLoan.downPayment}" />
      <td th:text="${tempLoan.lengthOfEmployment}" />
      <td th:text="${tempLoan.monthlyIncome}" />
      <td th:text="${tempLoan.monthlyCommitment}" />
      <td th:text="${tempLoan.firstName}" />
      <td th:text="${tempLoan.lastName}" />
      <td th:text="${tempLoan.phoneNumber}" />
      <td th:text="${tempLoan.status}" />
      <td>
        <div sec:authorize="hasAnyRole('ROLE_EMPLOYEE', 'ROLE_MANAGER')">
          <a th:href="@{/loans/confirm-form(loanId=${tempLoan.id})}" class="btn btn-info btn-sm">
                        Update
                    </a>
        </div>
        <div sec:authorize="hasRole('MANAGER')">
          <a th:href="@{/loans/delete(loanId=${tempLoan.id})}" class="btn btn-danger btn-sm">
                        Delete
                    </a>
        </div>
      </td>
    </tr>
  </tbody>
</table>