Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wyśrodkowanie elementów w poziomie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
shreker
Mam pytanie odnośnie jak wyśrodkować w poziomie coś takiego: - - - - - * * * * * - - - - - . Chodzi oczywiście o wyśrodkowanie elementów w jednej linii w poziomie względem siebie.
SmokAnalog
Zależy czym są te elementy. Jeśli to są osobne elementy dowolnego typu, to najprościej z flexboxem:

  1. .container {
  2. display: flex;
  3. justify-content: center;
  4. }


  1. <div class="container">
  2. <div class="item">Jakiś element</div>
  3. <div class="item">Inny element</div>
  4. <div class="item">I jeszcze inny</div>
  5. </div>
shreker
niestety nie działa, nie poziomują się dla takiej zawartości:
  1. <div class="container">
  2. <div class="item"> - - - - - </div>
  3. <div class="item"> * * * * * </div>
  4. <div class="item"> - - - - - </div>
  5. </div>

SmokAnalog
Działa, działa smile.gif Pokaż cały kod.
shreker
  1. <style type="text/css">
  2. .container {
  3. display: flex;
  4. justify-content: center;
  5. }
  6. <div class="container">
  7. <div class="item"> - - - - - </div>
  8. <div class="item"> * * * * * </div>
  9. <div class="item"> - - - - - </div>
  10. </div>
SmokAnalog
Domknąłeś tego div-a na końcu?
shreker
oczywiście smile.gif już poprawiam post, ale i tak nie działa sad.gif
A nie trzeba przypadkiem jakoś wypoziomować divy wzajemnie do siebie ?
SmokAnalog
Nie wiem jak Ty to testujesz, bo sprawdziłem w Chrome, Firefoksie i Safari i wszędzie jest na środeczku strony.
shreker
Przecież mi nie chodzi o środkowanie na stronie, ale wyraźnie napisałem że chodzi o wyśrodkowanie w poziomie wzajemnie wszystkich elementów,
Wyśrodkowanie na stronie to żaden problem,
SmokAnalog
No to nie wiem o co Ci chodzi. Narysuj.
shreker
Przecież to proste, chyba każdy wie jak wygląda poziom i jak pion, nie da się już prościej napisać niż wyśrodkowanie w poziomie wzajemnie elementów.
SmokAnalog
Jeśli chodzi Ci o stos, to to nie jest - cytuję: "wyśrodkowanie elementów w jednej linii w poziomie względem siebie.". To się nazywa wyśrodkowanie w osi pionowej.

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. }
shreker
Teraz mam elementy w pionie, kompletnie nie o to chodzi sad.gif Chodzi u wyświetlenie wszystkich elementów w jednym poziomie, a nie pionie.
w poprzednie wersji elementy wyświetlały się w poziomie, ale nie były wzajemnie wyśrodkowane (gwiazdki były powyżej linii myślników, a mają być wzajemnie wyśrodkowane)
SmokAnalog
No to narysuj, bo naprawdę nie wiadomo o co Ci chodzi. Wyśrodkować w jednej linii względem siebie? Co to znaczy?

Aha, o to chodzi. Gwiazdka ma indeks górny, więc to normalne, że nie są równo. Masz co najmniej trzy wyjścia:

1. Poszukać innego znaczka, który nie ma indeksu górnego.
2. Pobawić się position: relative.
3. Użyć obrazków.
shreker
jest coś takiego : https://zapodaj.net/5be6ad1392474.gif.html
a chodzi o to : https://zapodaj.net/8b2b16f517d91.gif.html

czyli, za pomocą css nie da się tego uzyskać ?
SmokAnalog
Jeśli koniecznie muszą być gwiazdki, to daj elementom z gwiazdkami takie właściwości:

  1. position: relative;
  2. top: .23em;


Doszedłem do wartości .23em metodą prób i błędów - wygląda w porządku dla wszystkich wielkości czcionki.
shreker
dzięki, jednak na szczęście da się w samym css, super smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.