如何获取图像下的文字？

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

Answer 2

尝试将文本放入像这样的段落标记中

<p>Send or Request</p>

以及其他人