Jak wyśrodkować ten element

Question

Mam element który albo jest na lewo albo ucieka na prawo. Nie mogę go za żadne skarby wyśrodkować. 

<fieldset class="rating">
		<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Znakomity"></label>
		<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Bardzo dobry"></label>
		<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Dobry"></label>
		<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Ujdzie"></label>
		<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Do dupy"></label>
	</fieldset>

 

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

 

Answer 1

Spróbuj wycentrować to w taki sposób

.rating {
  float: left;
  border: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

 

Comments

Nie działa :/

---

A usuń float left

---

to samo jest cały czas po lewej stronie a co bym nie dodała to przenosi na prawo :/

---

Dodaj to na codepen to Ci to zrobię i daj linka ;)

---

Już tam jest :)  https://codepen.io/jamesbarnett/pen/vlpkh

---

https://codepen.io/anon/pen/PbOyVj

---

https://codepen.io/anon/pen/PbOyVj?editors=1100

sorry ten dopiero jest poprawny ;) Daj jak możesz że to jest top komentarz ;)

Answer 2

Spróbój użyć margin-left:auto;margin-right:auto; a jak to nie zadziała to display:inline-block; i text-align:center;

Comments

Nie działa.

Answer 3

Na .rating daj tylko text-align: center;

Na input i label daj display: inline-block

Bez żadnego float

Comments

Nie działa również :(

---

Dziwne, u mnie działa

Answer 4

opakuj to divem i wyśrodkuj diva:

<div id="costam">

Twój kod HTML ...

</div>

 

CSS:

#costam {
    width: 153px;
    margin:0 auto;
}