Html 将图像与文本对齐？

我正试图让一个图像直接放在引导程序中导航栏项目的左侧，我几乎已经得到了它，事实上，它可以完美地处理小图像，但一旦我创建了一个更大的图像，它就会搞砸

我试着将图像的右边缩小到20px，但没有任何区别

我没有尝试更改宽度，因为我需要保持宽度不变。我不是用大小来改变高度，而是用剪裁来改变高度，请参阅下面的css以了解更多关于我是如何做到这一点的信息

不幸的是，我无法放置图像，因为stackoverflow说不允许使用该格式，但下面是图像外观的预览：

CSS:

HTML:

我也使用引导css，但我不会将所有这些粘贴到这里

我已将所有代码放在JSFIDLE上：

---

我不确定以下内容是否符合您的要求，但您可以更改

位置：绝对至
显示：内联块


#剪辑{
显示：内联块；
剪辑：rect（0，100px，70px，0）；
/*剪辑：形状（上、右、下、左）；NB“rect”是唯一可用的选项*/
}









您还有.profile图像链接标记的填充，这导致了放置问题。您也不需要在图像上进行绝对定位。我只是用高度属性缩小了它，但你可以随意摆弄它。尝试以下课程：

.profile-image {padding-top:0 !important; padding-bottom:0 !important;}

#clip {height:50px;}


<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
                    <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
                        <img id="clip" src="https://www.habbo.com.br/habbo-imaging/avatarimage?hb=img&figure=hr-828-52.hd-180-1.lg-280-1422.ch-3032-66-1408&action=wav&direction=2&head_direction=3&gesture=sml&size=m" />
 &nbsp;&nbsp;Adam Sandler <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
                                                <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
                    </ul>
                </li>
                </ul>

.profile-image {padding-top:0 !important; padding-bottom:0 !important;}

#clip {height:50px;}