Problem z wyśrodkowaniem tekstu

pytanie zadane 28 grudnia 2019 w HTML i CSS przez Vanbandama Nowicjusz (170 p.)

Witam wszystkich.

W ramach ćwiczeń html i css próbuję krok po kroku wykonać stronę z tego poradnika (https://www.youtube.com/watch?v=Rf_DjL_dbug&t=3382s)

Wszystko idzie świetnie do momentu kiedy muszę wystylizować za pomocą CSS'a element h2 (50:41 filmu). Mimo, że robię dokładnie tak jak pokazano na filmie to moje nagłówki lecą w górę zamiast zostać wyśrodkowane.

Mój kod:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flexy Responsive Flexbox Grid Website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="css/nav.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css"/>
</head>
<body>
<div class="wrapper">
	<div class="row" id="header">
		<div class="col-12">
			<img class="logo" src="img/flexy-logo.png"/>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<nav role="navigation" id="nav">
				<input class="trigger" type="checkbox" id="mainNavButton">
				<label for="mainNavButton" onclick>Menu</label>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Specials</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<img src="img/kite.png">
		</div>
	</div>
	<div class="row">
		<div class="col-12" style="padding: 2%;">
			<h2 class="dark">Welcome to Flexy!</h2>
		</div>
	</div>
	<div class="row" style="background-color: #3C8BB6; padding: 5% 0 3%;">
		<div class="col-12">
			<img src="img/paper.png">
		</div>
	</div>
	<div class="row" style="background-color: #F6931E;">
		<div class="col-11">
			<h2>Get ready for take off!</h2>
		</div>
		<div class="col-3">
			<img class="circle" src="img/take-off.png">
		</div>
	</div>
<div class="row" style="background-color: #1ABC9C;">
		<div class="col-11">
			<h2>We're flying around the globe.</h2>
		</div>
		<div class="col-3">
			<img class="circle" src="img/orange-globe.png">
		</div>
	</div>
	<div class="row" style="background-color: #E5EF3F;">
		<div class="col-11">
			<h2 class="dark">Above the clouds &amp; over the sea.</h2>
		</div>
		<div class="col-3">
			<img class="circle" src="img/waves.png">
		</div>
	</div>
	<div class="row" style="background-color: #34495E;">
		<div class="col-11">
			<h2>In just 42 hours and 27 minutes.</h2>
		</div>
		<div class="col-3">
			<img class="circle" src="img/plane.png">
		</div>
	</div>
	<div class="row" style="background-color: #00AFE1;">
		<div class="col-11">
			<h2>So come along for the ride!</h2>
		</div>
		<div class="col-3">
			<img class="circle" src="img/paper-blue.png">
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<img src="img/plane-background.png">
		</div>
	</div>
	<div class="row" style="background-color: #66D4FF;">
		<div class="col-12">
			<h2>Follow Us</h2>
		</div>
	</div>
	<div class="row" style="background-color: #66D4FF;">
		<div class="col-12">
			<ul class="social">
				<li><a href="#"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
				<li><a href="#"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#"><i class="fa fa-youtube"></i></a></li>
				<li><a href="#"><i class="fa fa-instagram"></i></a></li>
			</ul>
		</div>
	</div>
	<div class="row" style="background-color: #34495E; border-top: 2px solid 
	#F6931E">
		<div class="col-12">
			<p>&copy; Flexy.</p>
		</div>
	</div>
</div> <!---End Wrapper--->
</body>
</html>

i CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Raleway:300');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	background: #FFF;
	text-align: center;
	font: 1.15em/1 'Open Sans', sans-serif;
	color: #FFF;
}
.wrapper {
	background-color: #F5F5F5;
	height: 100%;
}
#header {
	background-color: #AFDED4;
}
.logo {
	padding: 2%;
}
img {
	max-width: 100%;
}
h2.dark {
	color: #34495E;
}
h2 {
	font: 300 2em/1 'Raleway', sans-serif;
	color: #FFF;
	padding: 2%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

Może mi ktoś wskazać gdzie popełniłem błąd?

Bardzo byłbym wdzięczny :)

1 odpowiedź

odpowiedź 28 grudnia 2019 przez viGor Użytkownik (740 p.)

Rozumiem że chcesz aby h2 było na środku?

Jeśli tak to musisz dopisać do h2 polecenia: transform: translate(-50%, -50%); oraz oprócz top:50%; należy dodać left: 50%;

Z tymi poleceniami element powinien zostać wyśrodkowany.

komentarz 28 grudnia 2019 przez Vanbandama Nowicjusz (170 p.)

Tak chce żeby element h2 został wyśrodkowany.

Nie no teraz wszystko działa :)

Swoją drogą zastanawia mnie dlaczego transform:translateY(-50%) nie działa. Chociaż na filmie w poradniku rzekomo działa. Ktoś wie czemu tak się dzieje?