Drukowana wersja tematu

Napisany przez: shreker 20.10.2020, 17:53:31

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.

Napisany przez: SmokAnalog 20.10.2020, 18:40:35

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 
<http://december.com/html/4/element/div.html class="container">
    <http://december.com/html/4/element/div.html class="item">Jakiś element</http://december.com/html/4/element/div.html>
    <http://december.com/html/4/element/div.html class="item">Inny element</http://december.com/html/4/element/div.html>
    <http://december.com/html/4/element/div.html class="item">I jeszcze inny</http://december.com/html/4/element/div.html>
</http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext 

Napisany przez: shreker 20.10.2020, 19:48:30

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

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/div.html class="container">
    <http://december.com/html/4/element/div.html class="item"> - - - - - </http://december.com/html/4/element/div.html>
    <http://december.com/html/4/element/div.html class="item"> * * * * * </http://december.com/html/4/element/div.html>
    <http://december.com/html/4/element/div.html class="item"> - - - - - </http://december.com/html/4/element/div.html>
</http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext 

Napisany przez: SmokAnalog 20.10.2020, 20:04:30

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

Napisany przez: shreker 20.10.2020, 20:22:27

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

Napisany przez: SmokAnalog 20.10.2020, 20:24:26

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

Napisany przez: shreker 20.10.2020, 20:36:52

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

Napisany przez: SmokAnalog 20.10.2020, 20:54:28

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

Napisany przez: shreker 20.10.2020, 20:56:18

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,

Napisany przez: SmokAnalog 20.10.2020, 21:01:44

No to nie wiem o co Ci chodzi. Narysuj.

Napisany przez: shreker 20.10.2020, 21:05:14

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.

Napisany przez: SmokAnalog 20.10.2020, 21:10:44

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 

Napisany przez: shreker 20.10.2020, 21:14:22

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)

Napisany przez: SmokAnalog 20.10.2020, 21:21:28

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.

Napisany przez: shreker 20.10.2020, 21:23:50

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

Napisany przez: SmokAnalog 20.10.2020, 21:30:19

Jeśli koniecznie muszą być gwiazdki, to daj elementom z gwiazdkami takie właściwości:

[CSS] pobierz, plaintext 
position: relative;
top: .23em;
[CSS] pobierz, plaintext 

Doszedłem do wartości .23em metodą prób i błędów - wygląda w porządku dla wszystkich wielkości czcionki.

Napisany przez: shreker 20.10.2020, 21:35:12

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