• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wyśrodkować ten element

VPS Starter Arubacloud
0 głosów
528 wizyt
pytanie zadane 30 listopada 2016 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

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;  } 

 

4 odpowiedzi

+1 głos
odpowiedź 30 listopada 2016 przez Konrad Fx Mądrala (6,910 p.)
edycja 1 grudnia 2016 przez Konrad Fx
 
Najlepsza

Spróbuj wycentrować to w taki sposób

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

 

komentarz 30 listopada 2016 przez ShadoWs Bywalec (2,800 p.)
Nie działa :/
komentarz 30 listopada 2016 przez Konrad Fx Mądrala (6,910 p.)
A usuń float left
komentarz 30 listopada 2016 przez ShadoWs Bywalec (2,800 p.)
to samo jest cały czas po lewej stronie a co bym nie dodała to przenosi na prawo :/
komentarz 30 listopada 2016 przez Konrad Fx Mądrala (6,910 p.)
Dodaj to na codepen to Ci to zrobię i daj linka ;)
komentarz 30 listopada 2016 przez ShadoWs Bywalec (2,800 p.)
komentarz 30 listopada 2016 przez Konrad Fx Mądrala (6,910 p.)
komentarz 30 listopada 2016 przez Konrad Fx Mądrala (6,910 p.)
https://codepen.io/anon/pen/PbOyVj?editors=1100

sorry ten dopiero jest poprawny ;) Daj jak możesz że to jest top komentarz ;)
0 głosów
odpowiedź 30 listopada 2016 przez aleksander_szut Użytkownik (940 p.)
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;
komentarz 30 listopada 2016 przez ShadoWs Bywalec (2,800 p.)
Nie działa.
0 głosów
odpowiedź 30 listopada 2016 przez Damian13 Obywatel (1,430 p.)
Na .rating daj tylko text-align: center;

Na input i label daj display: inline-block

Bez żadnego float
komentarz 30 listopada 2016 przez ShadoWs Bywalec (2,800 p.)
Nie działa również :(
komentarz 2 grudnia 2016 przez Damian13 Obywatel (1,430 p.)
Dziwne, u mnie działa
0 głosów
odpowiedź 1 grudnia 2016 przez niezalogowany
edycja 1 grudnia 2016
opakuj to divem i wyśrodkuj diva:

<div id="costam">

Twój kod HTML ...

</div>

 

CSS:

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

Podobne pytania

0 głosów
1 odpowiedź 117 wizyt
0 głosów
1 odpowiedź 1,874 wizyt
+1 głos
2 odpowiedzi 778 wizyt
pytanie zadane 10 lipca 2021 w HTML i CSS przez Doge Gaduła (3,320 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...