Как упорядочить число рядом с изображением?

Я заметил, что этот вопрос был задан до смерти, но он не работает для меня по какой-то странной причине.Как упорядочить число рядом с изображением?

Вот мой 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; вертикально-Align: средний; '. – 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

Awesome !! Это именно то, что я имею в виду, но мне было интересно, как я могу сосредоточиться на этом знаке, чтобы он выглядел лучше ха-ха. Ты знаешь, что я имею в виду? Центрировать 2 с иконкой? –

У вас есть два пути: дайте поле div или padding top или увеличьте размер шрифта. Проверьте образец снова, я обновил это. –

@ KalaJ был, что ваш ответ? –

Я сделал немного возился вокруг, и это работает для меня. Добавьте 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

Как упорядочить число рядом с изображением?

ответ

Смежные вопросы