Wypozycjonowanie elementu ze znakami specjalnymi - CSS

0

Cześć, mam pewien problem z wypozycjonowaniem elementu, inputa, który jest checkboxem ze specjalną klasą.W JsFiddle napisałem kawałek kodu, który niestety nie do końca odzwierciedla to co mam w rzeczywistej aplikacji ale jednak zachowuje się podobnie. Tutaj jest kawałek kodu:
https://jsfiddle.net/yzhL69fa/3/
Chodzi o to, że element input typu checkbox znajduje się poza moim divem "panel-body" i jakby w ogóle poza wszystkimi divami. Gdy usunę klasę "class="star-checkbox" z mojego inputa, ten pojawia się w odpowiednim defaultowym, miejscu (choć nie do końca, bo chciałbym aby był on wyśrodkowany). Myślę, że problemem może być "content: "\2605";" chociaż do końca nie jestem pewien. Próbowałem się tym trochę bawić i kompletnie nie rozumiem takiego zachowania tego elementu.
Po dodaniu do kasy "star-checkobox" wpisu: "display: inline-grid;" element zaczyna się pojawiać w odowiednim divie "panel-body" jednak znowu jest on jakby w niestabilnej pozycji (jakiś margines jakby od góry i lewej strony).
Jedyne czego chcę, to aby ten mój input znalazł się w divie "panel-body" i był odpowiednio wyśrodkowany. Napis "Is Super" powinien być na środku i tuż pod nim powinna znajdować się ta gwiazdka ale z takimi automatycznymi marginesami i paddingiem. Żeby ta gwizdka była po prostu wyśrodkowana i znajdowała się centralnie pod tytułem. Czy ktoś jest w stanie pomóc lub wytłumaczyć dlaczego tak się dzieje? Pozdrawiam

0

.star-checkbox {
cursor: pointer;
font-size: 60px;
** visibility: hidden;**
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1