Member 13812063 Ответов: 1

Следующий код генерирует звездную рейтинговую систему, однако звезды выровнены по правому краю, и я хочу, чтобы они были выровнены по центру


Следующий код генерирует звездную рейтинговую систему.Однако звезды выровнены по правому краю, и я хочу, чтобы они были выровнены по центру. Код (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>


Что я уже пробовал:

Я пробовал менять поплавок:вправо; влево, а также пытался заменить его на позицию: центр. Я хочу, чтобы звезды были выровнены по центру. Новичок здесь!

1 Ответов

Рейтинг:
0

Kornfeld Eliyahu Peter

Вы должны сделать две вещи, чтобы центрировать некоторый элемент блока:
1. Установите его ширину, иначе он заполнит весь контейнер
2. Сделайте его маржу автоматической (а не 0!)

fieldset {
  margin: auto;
  width: 200px;
}