Как центрировать абзац под полем div?

У меня есть несколько блоков 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> 

Всего 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> 


У меня также есть решение только с редактированием на 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> 


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