如何在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>

这是我试图实现的最终结果

但是，我在该框下面没有.....文本。谢谢。

Answer 1

使用JMeter Distributed Testing with Docker怎么样？
将其藏在盒子下面有点笨拙，但是您就可以了。

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

Answer 2

我还有一个解决方案，只需在p上进行编辑即可。

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

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

Answer 3

您可以将p元素摆放到绝对位置，对于position: relative元素使用.box并按照下面的示例根据位置设置：

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

.box p {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
}

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