Forum PHP.pl

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.

Zależy czym są te elementy. Jeśli to są osobne elementy dowolnego typu, to najprościej z flexboxem:

[CSS] pobierz, plaintext 
.container {
    display: flex;
    justify-content: center;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class="container">
    <div class="item">Jakiś element</div>
    <div class="item">Inny element</div>
    <div class="item">I jeszcze inny</div>
</div>
[HTML] pobierz, plaintext 

niestety nie działa, nie poziomują się dla takiej zawartości:

[HTML] pobierz, plaintext 
<div class="container">
    <div class="item"> - - - - - </div>
    <div class="item"> * * * * * </div>
    <div class="item"> - - - - - </div>
</div>
[HTML] pobierz, plaintext 

Działa, działa Pokaż cały kod.

[HTML] pobierz, plaintext 
<style type="text/css">
.container {
    display: flex;
    justify-content: center;
}
</style>
<div class="container">
    <div class="item"> - - - - - </div>
    <div class="item"> * * * * * </div>
    <div class="item"> - - - - - </div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował shreker 20.10.2020, 20:37:14

Domknąłeś tego div-a na końcu?

oczywiście już poprawiam post, ale i tak nie działa
A nie trzeba przypadkiem jakoś wypoziomować divy wzajemnie do siebie ?

Ten post edytował shreker 20.10.2020, 20:50:03

Nie wiem jak Ty to testujesz, bo sprawdziłem w Chrome, Firefoksie i Safari i wszędzie jest na środeczku strony.

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,

Ten post edytował shreker 20.10.2020, 20:57:05

No to nie wiem o co Ci chodzi. Narysuj.

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.

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.

[CSS] pobierz, plaintext 
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
[CSS] pobierz, plaintext 

Teraz mam elementy w pionie, kompletnie nie o to chodzi 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)

Ten post edytował shreker 20.10.2020, 21:17:24

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.

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ć ?

dzięki, jednak na szczęście da się w samym css, super