• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

pozycjonowanie diva w pionie, fullpage scrolling

0 głosów
179 wizyt
pytanie zadane 16 stycznia w HTML i CSS przez Cheatsu Nowicjusz (120 p.)

Cześć,
chciałbym aby div "wycieczka" był w centralnej części ekranu, na stronie użyłem fullpage scrolling i nie do końca wiem, jak na danej "stronie" wypozycjonować pion.

 

<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome1">
	
	<link rel="stylesheet" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
	<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="jquery.fullpage.js"></script>
	
</head>

<body>
	<div id="fullpage">
		<section>
			<h1>jakis tekst na powitanie</h1>
		</section>
		
		<section>
			<div id="wycieczka">
			</div>
		</section>
		<section>
			<h1>Twórcy</h1>
		</section>
	</div>
	<script type="text/javascript">
		FastClick.attach(document.body);
		$('#fullpage').fullpage();
	</script>
	
</body>
</html>
body
{
	margin: 0;
	padding: 0;
	font-family: OCR A Std;
	color: white;
}
body h1
{
	text-shadow: black 0.1em 0.1em 0.2em 
}

#fullpage
{
	height: 100vh;
	overflow: hidden;
}

#fullpage section
{
	height: 100vh;
}

#fullpage section h1
{
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 100vh;
	font-size: 5em;
}

#fullpage section:nth-child(1)
{
	background-image: url(background.jpg);
	background-size: cover;
}

#fullpage section:nth-child(2)
{
	background-image: url(background2.jpg);
	background-size: cover;
}

#fullpage section:nth-child(3)
{
	background-color: grey;
}

#wycieczka
{
	width: 80%;
	height: 80%;
	background-image: url(wycieczka.jpg);
	margin-left: auto; 
	margin-right: auto;
}

 

2 odpowiedzi

0 głosów
odpowiedź 16 stycznia przez MateuszB Stary wyjadacz (10,500 p.)
edycja 16 stycznia przez MateuszB

Na przykład używając flexboxa?

.wycieczka{
  display: flex;
  justify-content: center;
  align-items: center;
}
 <section id="wycieczka" class="wycieczka">
      <div class="wycieczka__dziecko">
<!-- Jakaś treść -->
      </div>
</section>

+ nie zdziw się, że nie zadziała - masz tam przecież line-height: 100vh;, które wszystko rozpycha.

W ten sposób sekcja jest "kontenerem", a div wycieczka__dziecko jest "itemem" - itemów możesz wrzucić do kontenera kilka, wszystkie powinny zostać wycentrowane. Tutaj bardziej szczegółowo.

Znajdziesz w sieci masę tricków jak coś wycentrować w pionie i poziomie, ale to jest chyba najszybszy sposób...

0 głosów
odpowiedź 16 stycznia przez pablop76 Szeryf (88,990 p.)

Podobne pytania

+1 głos
4 odpowiedzi 241 wizyt
pytanie zadane 19 grudnia 2015 w HTML i CSS przez medamis Użytkownik (640 p.)
+1 głos
1 odpowiedź 82 wizyt
pytanie zadane 19 kwietnia 2018 w HTML i CSS przez tomecki Nowicjusz (240 p.)
0 głosów
1 odpowiedź 79 wizyt
pytanie zadane 19 marca 2018 w HTML i CSS przez ziomek7 Użytkownik (850 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

62,274 zapytań

108,398 odpowiedzi

226,279 komentarzy

34,844 pasjonatów

Przeglądających: 196
Pasjonatów: 1 Gości: 195

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...