Question

我注意到这个问题已被要求死亡，但由于一些奇怪的原因，这对我不起作用。

这是我的CSS：

.sNums {
    font-weight:bold;
    font-family:Arial;
    font-size:10px;


}

这是我的HTML：

<td>
                        <div class="sNums">
                           2
                        </div>
                        <img style="vertical-align:middle; margin: 0 0 14px 14px" src="@Url.Content("~/Content/images/Red.png")" alt="logo" width:"100"  />

</td>

然而，它显示为2左侧对齐，然后图标显示在2的底部。我希望图标出现在2.我不知道为什么它不起作用。

我尝试了vertical-align：中间就像很多SO帖子所说的那样，但图片标识仍然出现在数字的底部。

Answer 1

看看这个希望是你正在寻找的，如果你减少图像边距留下数字和图像之间的差距会更少，如果没有提供更多细节。

CSS

.sNums {
font-weight:bold;
font-family:Arial;
font-size:10px; /* or use 20px */
float:left;
margin-top:6px;}

HTML

<td>
                    <div class="sNums">
                       2
                    </div>
                    <img style="vertical-align:middle; margin: 0 0 14px 14px; width:50px;" src="http://static.freepik.com/free-photo/computer-room_21237883.jpg")" alt="logo">

Answer 2

我做了一些摆弄，这对我有用。在所有代码周围添加一个div，并使用您需要的样式来保持绝对位置。 position:absolute;并添加left: 0px;以对齐代码所在的div的左侧。结果是http://helpforyou.gweb.io/。我希望这是你想要的，抱歉图片很大。

<div>

<div align="left" class="sNums">
&nbsp 2
</div>

<img align="left" style="position: absolute; vertical-align:middle; margin: 0 0 14px 14px ;  left: 0px;" src="@Url.Content("~/Content/images/Red.png")" alt="logo" width:"100"  />

</div>

如何对齐图像旁边的数字？

2 个答案: