Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> wyśrodkowanie elementów w poziomie
shreker
post 20.10.2020, 17:53:31
Post #1





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 18:40:35
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 19:48:30
Post #3





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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>

Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 20:04:30
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Działa, działa smile.gif Pokaż cały kod.
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 20:22:27
Post #5





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


  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>


Ten post edytował shreker 20.10.2020, 20:37:14
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 20:24:26
Post #6





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Domknąłeś tego div-a na końcu?
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 20:36:52
Post #7





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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 ?

Ten post edytował shreker 20.10.2020, 20:50:03
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 20:54:28
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Nie wiem jak Ty to testujesz, bo sprawdziłem w Chrome, Firefoksie i Safari i wszędzie jest na środeczku strony.
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 20:56:18
Post #9





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 21:01:44
Post #10





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


No to nie wiem o co Ci chodzi. Narysuj.
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 21:05:14
Post #11





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 21:10:44
Post #12





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


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. }
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 21:14:22
Post #13





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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)

Ten post edytował shreker 20.10.2020, 21:17:24
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 21:21:28
Post #14





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 21:23:50
Post #15





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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ć ?
Go to the top of the page
+Quote Post
SmokAnalog
post 20.10.2020, 21:30:19
Post #16





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
shreker
post 20.10.2020, 21:35:12
Post #17





Grupa: Zarejestrowani
Postów: 257
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


dzięki, jednak na szczęście da się w samym css, super smile.gif
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 20.10.2021 - 17:31