如何在锚中包裹图像和文本标签?

时间:2018-11-16 21:09:55

标签: html css

我正在制作一个菜单部分,旁边是带有标志的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的其余代码为中心,这不是我想要的关于一个大锚点的内容),我知道它看起来不正确。 / p>

1 个答案:

答案 0 :(得分:0)

我不确定您要查找的内容是什么,但是当您需要将组/块作为链接时,如果您希望将图像和文本用作链接。 (很抱歉,如果我说的话听起来很奇怪/令人困惑。在那种情况下,我希望我的榜样能奏效)

例如:

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