centrarea sectiunii cu flex

#1
simion95

Posted 26 December 2023 - 20:18

New Member

Grup: Candidate Members
Posts: 3
Înscris: 26.12.2023

Salutare , ma chinui de vreo cateva ore sa gasesc ce imi impiedica sectiunea sa se centreze ca si nav barul , i-am adus clasele cu proprietati de flex si justify-content: center; .
aveti vreo solutie , s-au daca observati de ce nu se centreaza in pagina

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
	  href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
	  rel="stylesheet"
	/>
	<title>Landing Page</title>
  </head>
  <body>
	<nav class="nav row row-centered">
	  <div class="content-container row nav-bar-wrapper">
		<div class="app-logo-container row row-centered">
		  <img id="app-logo" src="images/logo.png" alt="" />
		  <h3 id="app-title">Product</h3>
		</div>
		<div class="nav-bar-buttons-container row">
		  <div class="row row-centered">
			<div class="nav-links-container row-centered">
			  <a href="#">Product</a>
			  <a href="#">Costumers</a>
			  <a href="#">Pricing</a>
			  <a href="#">Resources</a>
			</div>
		  </div>
		  <div class="row row-centered">
			<button class="button-outlined primary-button buttons-nav">
			  Sign In
			</button>
			<button class="primary-button buttons-nav">Sign Up</button>
			<button class="switch-theme-button">
			  <img
				id="switch-theme-icon"
				src="images/switch-theme-icon.png"
				alt=""
			  />
			</button>
		  </div>
		</div>
	  </div>
	</nav>
	<section class="row content-container">
	  <div class="content-left-col">
		<h1 class="main-header">Work at the speed of thought</h1>
		<p class="subtitle">
		  Tools, tutorials, design and innovation experts, all in one place! The
		  most intuitive way to imagine your next user experience.
		</p>
	  </div>
	  <div class="content-right-col"></div>
	</section>
  </body>
</html>

.nav {
  height: 80px;
  justify-content: center;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
}
.row-centered {
  align-items: center;
}
.content-container {
  max-width: 1120px;
  justify-content: center;
}
#app-logo {
  height: 40px;
  margin-right: 16px;
}
#app-title {
  font-family: Poppins, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 28px;
  color: #173a56;
}
.nav-bar-wrapper {
  width: 100%;
  justify-content: space-between;
}
.nav-links-container > a {
  text-decoration: none;
  color: #22343d;
  font-size: 16px;
  font-family: Poppins, sans-serif;
  font-weight: 400;
  line-height: 28px;
  margin: 0 15px;
}
.nav-links-container > a:hover {
  font-weight: 600;
}
.primary-button {
  border-radius: 4px;
  background: #02897a;
  height: 43px;
  color: #fff;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  cursor: pointer;
  padding: 0 25px;
}
.button-outlined {
  background-color: #fff;
  color: #173a56;
  border: 1px solid #bcd0e5;
}
.buttons-nav {
  margin: 0 12px;
}
.switch-theme-button {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #f3f3f3;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#switch-theme-icon {
  height: 24px;
  width: 24px;
}
.nav-bar-buttons-container {
  display: flex;
  justify-content: flex-end;
}
.main-header {
  color: #22343d;
  font-family: Poppins;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
}
.content-left-col,
.content-right-col {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.subtitle {
  color: #22343d;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

Back to top

#2
cristian-p

Posted 27 December 2023 - 00:22

Stelist

Grup: Senior Members
Posts: 2,230
Înscris: 23.10.2013

Încearcă să adaugi "margin: auto"

Back to top

#3
simion95

Posted 27 December 2023 - 00:37

New Member

Grup: Candidate Members
Posts: 3
Înscris: 26.12.2023

am adaugat la ".content-container" si merge,
multumesc !

Back to top

Anunturi

Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

centrarea sectiunii cu flex

#1 simion95 Posted 26 December 2023 - 20:18

#2 cristian-p Posted 27 December 2023 - 00:22

#3 simion95 Posted 27 December 2023 - 00:37

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
simion95

Posted 26 December 2023 - 20:18

#2
cristian-p

Posted 27 December 2023 - 00:22

#3
simion95

Posted 27 December 2023 - 00:37