Следующий код генерирует звездную рейтинговую систему, однако звезды выровнены по правому краю, и я хочу, чтобы они были выровнены по центру
Следующий код генерирует звездную рейтинговую систему.Однако звезды выровнены по правому краю, и я хочу, чтобы они были выровнены по центру. Код (css)-
fieldset, label { margin: 0; padding: 0; } body{ margin: 20px; } h1 { font-size: 1.5em; margin: 10px; } .rating { border: none; } .rating > input { display: none; } .rating > label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; content: "\f005"; } .rating > label .float_center{ color: #ddd; float: left; } .rating > input:checked ~ label, .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #FF0000; } .rating > input:checked + label:hover, .rating > input:checked ~ label:hover, .rating > label:hover ~ input:checked ~ label, .rating > input:checked ~ label:hover ~ label { color: #B22222; }
HTML
<h2> <fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> </fieldset> </h2>
Что я уже пробовал:
Я пробовал менять поплавок:вправо; влево, а также пытался заменить его на позицию: центр. Я хочу, чтобы звезды были выровнены по центру. Новичок здесь!