html - 如何在 anchor 中包裹图像和文本标签？

我正在制作一个菜单部分，旁边是带有标志的配置文件png。它必须全部固定在一起，这样，当您将鼠标悬停在其上时，它便是指向登录页面的链接，包括img和文本，但所有这些都在一起……如果我对您有意义。我不知道。下面是到目前为止的代码：

<div class="signin-div topbar-section">

        <a class="sign-in" href="#sign-in"><img class="signin-img" src="images/profile-icon.png" alt="profile-icon">Sign in</a>
</div>

在CSS中：

.sign-in {
        float: left;
        font-size: 90%;
        padding: 12px;
        margin-left: -14px;
    }
.signin-img {
        width: 25px;
        margin: 10px 10px;
        float: left;

免责声明，此代码有效（以top-bar-ul的其余代码为中心，这不是我想要的一个大锚点），我知道它看起来不正确。

最佳答案

我不确定您要查找的内容是什么，但是当您需要一个组/块作为链接时，如果要让图像和文本作为链接来工作。（对不起，如果我说的话听起来很奇怪/令人困惑。在那种情况下，我希望我的榜样能奏效）

例如：

<html>
<body>

<div style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
  <a href="http://google.com" style="text-align: center;">
    <div>
        <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png" alt="user Image">
        <br>
        user
    </div>
  </a>
</div>

</body>
</html>