Я пытаюсь разместить значок значка "уведомление" над изображениями. Я использую Twitters Bootstrap в качестве базовой структуры и создаю пользовательский класс CSS под названием notify-badge
. Но я не могу заставить что-то правильно подойти.
Благодаря волшебству Photoshop, вот что я пытаюсь выполнить.
Вот мой CSS-код.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
Я хотел бы иметь возможность размещать любые небольшие тексты в значке и расширять красный круг до соответствия.
Вот мой HTML-код.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
ИЗМЕНИТЬ:
Вот изображение с ответом APAD1.
Добавление margin-top:-20px;
в .item
устраняет проблему выравнивания.