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

Question

正如您在上面看到的，这就是我目前拥有的。我希望文本在每个图标下方居中。

这是 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;   
}

Answer 1

您可以添加 <br>将文本分到下一行。然后创建一个新的 div用 class="wallet-action-box" 包围每个“盒子”以一切为中心。

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

Try this fiddle