2016-08-09 4 views
-1

walletWie bekomme ich den Text unter die Bilder?

Wie Sie oben sehen, ist das, was ich derzeit habe. Ich möchte den Text unter jedem Symbol zentrieren lassen. Hier

ist die 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> 

Hier ist die CSS ist:

.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; 
} 

Antwort

0

Versuchen Texte in einem Absatz-Tag wie diese

<p>Send or Request</p> 

sowie Putting als andere

1

Sie können <br> hinzufügen, um den Text in die nächste Zeile zu teilen. Dann erstellen Sie eine neue div, die jede "Box" mit einer class="wallet-action-box" umgibt, die alles zentriert.

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

Try this fiddle

Verwandte Themen