html - 如何使div框下的段落居中？

Question

我有几盒div元素；我想在....下面的每个框中都有文本，居中对齐。

这是我已经拥有的：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: auto;
  display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table style="width:100%;border:none;">
  <tr class="moul">
    <th style="width:10%;">
      <p class="text-center">Winest</p>
    </th>
    <th>
      <p class="text-center">Party B</p>
    </th>
    <th style="width:50%;">
      <p class="text-center">Party A</p>
    </th>
  </tr>
  <tr>
    <td class="text-center">
      <div class="box">
        <p>............</p>
      </div>

    </td>
    <td class="text-center">
      <div class="box">
        <p>............</p>
      </div>

      <div class="box">
        <p>............</p>
      </div>

      <div class="box">
        <p>............</p>
      </div>

      <div class="box">
        <p>............</p>
      </div>
    </td>
    <td>
      <p class="text-center">MFI Institution</p>
      <p class="text-center">Signature</p>
      <p class="text-center">............</p>
    </td>
  </tr>
</table>

这是我试图达到的最终结果

但是，我无法.....在框下方正确显示文本。谢谢。

标签： htmlcss

Answer 1

怎么用flex？
把它放在盒子下面有点笨拙，但你去吧。

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: auto;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

.box p {
  position: relative;
  bottom: -25px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table style="width:100%;border:none;">
  <tr class="moul">
    <th style="width:10%;">
      <p class="text-center">Winest</p>
    </th>
    <th>
      <p class="text-center">Party B</p>
    </th>
    <th style="width:50%;">
      <p class="text-center">Party A</p>
    </th>
  </tr>
  <tr>
    <td class="text-center">
      <div class="box">
        <p>............</p>
      </div>

    </td>
    <td class="text-center">
      <div class="box">
        <p>............</p>
      </div>

      <div class="box">
        <p>............</p>
      </div>

      <div class="box">
        <p>............</p>
      </div>

      <div class="box">
        <p>............</p>
      </div>
    </td>
    <td>
      <p class="text-center">MFI Institution</p>
      <p class="text-center">Signature</p>
      <p class="text-center">............</p>
    </td>
  </tr>
</table>