如何在圖片旁邊對齊數字？

我注意到這個問題已經被要求死亡，但由於某種奇怪的原因，它不適合我。如何在圖片旁邊對齊數字？

這裏是我的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.旁邊。我不確定它爲什麼不起作用。

我試過垂直對齊：中間像很多SO帖子建議，但圖片標誌仍然出現在數字的底部。

來源

2014-02-21 Kala J

您是否嘗試過'text-align：center'圖像？ –

你需要**這兩個項目都有'display：inline-block;垂直對齊：中部;'。 – PlantTheIdea

這似乎工作。但是，我想知道如何將我的文本集中到我的圖像中。這樣數字看上去與圖像對齊，而不是與圖像對齊。請讓我知道如果我沒有意義。 –

看看這個希望是你正在尋找的也是如果你減少圖像的餘量留下的數字和圖像之間的差距會更少，如果不提供更多的細節。

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

來源

2014-02-21 16:02:16

真棒！這正是我的意思，但我想知道我怎樣才能將那個2集中到那個圖標上，以便它看起來更好。你懂我的意思嗎？將2中央圖標？ –

你有兩種方法，給div邊緣或填充頂部或增加你的字體大小。再次查看示例我已更新過該示例。 –

@KalaJ是你的答案嗎？ –

我做了一些擺弄周圍的，這對我的作品。圍繞您的所有代碼添加div，並以您需要的位置爲絕對位置添加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>

來源

2014-02-21 16:16:44 user3267723

如何在圖片旁邊對齊數字？

回答

相關問題