My task is to design a 3-grid layout that resembles the following structure:
-------------------------------------
| Image | The name of logo | > |
-------------------------------------
I attempted this using the code below:
<div class="panel panel-default">
<div class="card-header">
<a class="card-link row" href="/webview/topup">
<p style="font-size: 14sp; margin-bottom: 0">
<img src="../images.png" th:src="@{../images/image.png}" width="10%"
height="10%" style="vertical-align: middle; font-family: 'Barlow', sans-serif;">
The name of logo
<img src="../arrow.png" th:src="@{../arrow.png}" width="2%" height="2%"
style="vertical-align: middle;" align="right";>
</p>
</a>
</div>
</div>
However, I'm facing an issue with centering the arrow as it is currently aligned to the right only. How can I achieve both right alignment and centering for the arrow?
Apologies for my beginner questions in HTML/CSS. Thank you.