Forum PHP.pl > [HTML][CSS] Jeden div wyśrodkowany w stosunku do drugiego.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Jeden div wyśrodkowany w stosunku do drugiego.

stellatus

2.12.2019, 18:31:56

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?

trueblue

2.12.2019, 18:47:14

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?

stellatus

2.12.2019, 20:28:28

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)

dublinka

2.12.2019, 20:34:32

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

stellatus

2.12.2019, 21:40:19

Dzięki. Zrobione: https://codepen.io/rudolph-reti/pen/QWwWOEW
Ale nie wiem czy poprawnie.

trueblue

2.12.2019, 21:40:40

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).

stellatus

3.12.2019, 02:57:09

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?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.