html - 如何获得图片下方的文字？

如您所见，这就是我目前所拥有的。我希望文本在每个图标下方居中。

这是HTML：

<div class="wallet-actions-section">
  <div class="container">
    <div class="row">
      <div class="col-md-11 col-sm-12">
        <div class="wallet-action-col">
          <a href="~/Views/Account/Login.cshtml"><img src="~/assets/images/icons/send-icon.png" /></a>Send or Request
          <a href="~/Views/Account/Login.cshtml"><img src="~/assets/images/icons/add-money-icon.png" /></a>Send or Request
          <a href="~/Views/Account/Login.cshtml"><img src="~/assets/images/icons/withdraw-icon.png" /></a>Send or Request
          <a href="~/Views/Account/Login.cshtml"><img src="~/assets/images/icons/security-icon.png" /></a>Send or Request
          <a href="~/Views/Account/Login.cshtml"><img src="~/assets/images/icons/exchange-icon.png" /></a>Send or Request
        </div>
      </div>
   </div>
 </div>

这是CSS：

 .wallet-action-col {
   height: 100px;
   width: 90%;
   margin:0 auto;
   border-radius: 5px;
   padding: 15px;
   background-color: #f3f8fb;
   color: #262626;
 }

.wallet-actions-section {
  margin-top:10px;
  margin-bottom:10px;
}

最佳答案

您可以添加<br>以将文本分隔到下一行。然后，创建一个新的div，将每个“框”周围的class="wallet-action-box"置于所有内容的中心。

 .wallet-action-box {
   display:inline-table;
   border:1px solid #aaa;
   text-align:center
 }

Try this fiddle