Как сделать красный круг с крестом с помощью CSS ⇐ CSS

[Anonymous]

Я хочу поставить крестик (X) в красном кружке.
Вот моя попытка:
.crosssign {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}

.crosssign_circle {
position: absolute;
width:22px;
height:22px;
background-color: red;
border-radius:11px;
left:0;
top:0;
}

.crosssign_stem {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
left:11px;
top:6px;
}

.crosssign_stem2 {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
right:11px;
top:6px;
}

Но это выглядит так:
[img]https://i.sstatic.net /jYfQS.png[/img]

Итак, как мне разместить основу в правильном порядке, чтобы появился знак X?
И HTML тоже здесь:





Подробнее здесь: https://stackoverflow.com/questions/680 ... e-with-css