How do I align number next to image?

Question

I noticed this question has been asked to death but it's not working for me for some strange reason.

Here is my CSS:

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


}

Here is my 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>

However, it shows up like a 2 aligned to the left then the icon appears on the bottom of the 2. I want the icon to appear next to the 2. I'm not sure why it's not working.

I tried vertical-align:middle like a lot of the SO posts suggest but the image logo still appears at the bottom of the number.

Answer 1

Check out this hope to be what you're looking for also if you reduce the image margin left the gap between the number and image would be less, If not give more details.

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

I did a bit of fiddling around, and this works for me. Add a div around all of your code and in the style you need to make the position absolute. position:absolute; and add a left: 0px; to align to the left of the div that your code is inside of. http://helpforyou.gweb.io/ is the result. I hope it's what your looking for, Sorry the picture is big.

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