Align a subtitle below text in td table-CodePudding

I have a td, I want to add a subtitle below the text. The text should be in exact center of td.

Here is what I have tried

.lease-p {
  margin-top: 2px;
  font-size: 10px !important;
  line-height: 10px !important;
}

.pricetable td {
  text-align: center;
  padding: 18px 10px;
  vertical-align: middle;
}

<td class="payments" width="100px">
  <span class="bprice">TITLE €</span>
  <p class="lease-p">SUBTITLE</p>
</td>

I need the 260 Euro to be exact in middle like 15490 and then other values below 260.

CodePudding user response：

Your question is not clear enough for me. But I think you want to center your td with span value.

You can use display: flex. Cover with a div and change flex-direction to column to stay top each other. And than align-items: center

If you do not want to center at all. You can use align-item: flex-end too.

.lease-p {
        margin-top: 2px;
        font-size: 10px !important;
        line-height: 10px !important;
    }
    
    .pricetable td {
        text-align: center;
        padding: 18px 10px;
        vertical-align: middle;
    }
    
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        }

<td class="payments" width="100px">
  <div class="container">
    <span class="bprice">TITLE €</span>
  <p class="lease-p">SUBTITLE</p>
  </div>
</td>

CodePudding user response：

.lease-p {
  margin-top: 2px;
  font-size: 10px !important;
  line-height: 10px !important;
}

.pricetable td {
  text-align: center;
  padding: 18px 10px;
  vertical-align: middle;
}

<table class="pricetable">
  <tr>
    <td>Test Node</td>
    <td class="payments" width="100px" style="padding-bottom: 0;">
      <span class="bprice">TITLE €</span>
      <p class="lease-p" style="margin-bottom: 5px;">SUBTITLE</p>
    </td>
  </tr>
</table>