Как центрировать абзац под полем 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

У меня тоже есть решение только с правкой на стр.

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

Вы можете сделать элемент 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>

Answer 3

Как насчет использования 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>