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

Problem z wyśrodkowaniem tekstu

VPS Starter Arubacloud
0 głosów
122 wizyt
pytanie zadane 28 grudnia 2019 w HTML i CSS przez Vanbandama Nowicjusz (140 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ź

0 głosów
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 (140 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? 

Podobne pytania

0 głosów
1 odpowiedź 124 wizyt
pytanie zadane 14 kwietnia 2017 w HTML i CSS przez Damian67114 Początkujący (250 p.)
0 głosów
0 odpowiedzi 168 wizyt
0 głosów
0 odpowiedzi 91 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...