[HTML][CSS] Jeden div wyśrodkowany w stosunku do drugiego. |
[HTML][CSS] Jeden div wyśrodkowany w stosunku do drugiego. |
2.12.2019, 18:31:56
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Mam dwa divy. Jeden jest pod drugim: https://codepen.io/rudolph-reti/pen/QWwWOEW
Poniżej 781px szerokości ekranu ustawiają się obok siebie. Co zrobić, żeby ten po prawej ("drugi - div") ustawiał się zawsze wyśrodkowany w stosunku do tego po lewej? |
|
|
2.12.2019, 18:47:14
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Jeśli poniżej 781px mają się ustawiać inaczej niż obok siebie, to na pewno nie jest potrzebny float.
Co to znaczy, że drugi ma być wyśrodkowany względem pierwszego? Pierwszy ma być do lewej, drugi wyśrodkowany względem niego, czy może obydwa wyśrodkowane? -------------------- |
|
|
2.12.2019, 20:28:28
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Chodzi mi o to, żeby uzyskać taki efekt:
http://srv19859.microhost.com.pl/77214263_...689482752_n.png (w pierwszym divie jest jakiś obrazek, drugi div dopasowuje się do wielkości tekstu i "jest wyśrodkowany w stosunku do pierwszego" - wiem, że to nieprecyjnie powiedziane, ale na obrazku chyba jest to jasne) Mogłoby być też np. tak: http://srv19859.microhost.com.pl/css2.png (w pierwszym divie jest jakiś obrazek; drugi div: przejmuje wysokość od pierwszego, jego szerokość ustalam ja, a tekst jest wyśrodkowany horyzontalnie i wertykalnie) |
|
|
2.12.2019, 20:34:32
Post
#4
|
|
Grupa: Zarejestrowani Postów: 594 Pomógł: 66 Dołączył: 22.02.2008 Skąd: Dublin Ostrzeżenie: (0%) |
-------------------- |
|
|
2.12.2019, 21:40:19
Post
#5
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki. Zrobione: https://codepen.io/rudolph-reti/pen/QWwWOEW
Ale nie wiem czy poprawnie. Ten post edytował stellatus 2.12.2019, 21:46:45 |
|
|
2.12.2019, 21:40:40
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Ustaw dla obydwu dzieci CSS (poniżej 781):
Kod display:inline-block; vertical-align:middle; Między elementami nie może być w kodzie białego znaku (np. spacji, entera). -------------------- |
|
|
3.12.2019, 02:57:09
Post
#7
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki. Na prawdę mi pomogliście.
Teraz wygląda to tak: Kod <html> <body> <style> .rodzic { text-align: center; background: black; } .dziecko1 { padding-top: 30px; background: blue; } .dziecko2 { padding-top: 20px; background: green; } @media only screen and (max-width: 781px) { .rodzic { display: flex; margin-left: 30px; margin-right: 30px; margin-top: 30px; } .dziecko1 { width: auto; padding-top: 0px; display: inline-block; vertical-align: middle; } .dziecko2 { flex-grow: 1; margin: auto; padding-left: 10px; padding-right: 10px; padding-top: 0px; display: inline-block; vertical-align: middle; } } h4 { margin-bottom: 0px; } </style> <div class="rodzic"> <div class="dziecko1"><img src="https://photos.gograph.com/thumbs/CSP/CSP296/hand-drawn-deer-head-vector-stock_k33571561.jpg" alt="a"></div> <div class="dziecko2"> <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h4> </div> </div> </body> </html> Dobrze? Ten post edytował stellatus 3.12.2019, 11:15:29 |
|
|
Wersja Lo-Fi | Aktualny czas: 29.03.2024 - 09:33 |