Align BackGround Image at center of Anchor Tag using CSS

i wanted to place the arrow image down..how to do it?

is there any background image property that place the arrow down?

Any help will be appreciated.

                                         <div class="col-md-6">
                                              <p><a  class="sample" style="font-size:15px;padding-top:18px;color:#3399FF"
                                                href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">View Sample</a></p>
                                              <div id="light" class="white_content"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'" style="float:right;padding-top:18px;">Close</a>
                                                <img src="images/catlog-copy.jpg"  rel="lightbox" Font-Size="11pt" ForeColor="#3399FF"
                                                  Font-Underline="False"></asp:HyperLink> 
                                              </div>
                                              <div id="fade" class="black_overlay"></div>
                                          </div>

.sample
{
    background-image:url(../images/Arrow.png);background-repeat:no-repeat;padding-left:20px;
    text-decoration:none;
    color:#3399FF;
    font-family:Calibri;
float:left;

}

https://ibb.co/gUrwp7