Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS] Jeden div wyśrodkowany w stosunku do drugiego.
stellatus
post 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?
Go to the top of the page
+Quote Post
trueblue
post 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?


--------------------
Go to the top of the page
+Quote Post
stellatus
post 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)
Go to the top of the page
+Quote Post
dublinka
post 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%)
-----


https://stackoverflow.com/questions/2637696...iv-side-by-side


--------------------
Go to the top of the page
+Quote Post
stellatus
post 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
Go to the top of the page
+Quote Post
trueblue
post 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).


--------------------
Go to the top of the page
+Quote Post
stellatus
post 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
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: 29.03.2024 - 09:33