Почему я не могу переместить «Карту» в центр экрана? - PullRequest
0 голосов
/ 24 февраля 2020

У меня есть довольно странная проблема (и несколько моих товарищей), что мы не можем поместить класс "card" bootstrap в центр экрана, мы перепробовали множество решений, которые были доступны на inte rnet, но ни один из них не сработал.

Вот div, который не хочет перемещаться:

<div class="container h-100">
        <div class="flex-center-wrap">
        <div class="card">
        <div class="card-body text-center">
        <h5 class="card-title mb-2">hihihihihih</h5>
        <div class="card-subtitle mb-3">hihihihi<a href="#" target="_blank">hihihihi</a></div>
        <form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
        <input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
        <input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
        </form>
    </div>
</div>
</div>
</div>

, и вот быстрый показ того, как он выглядит (этот div перекрывает navbar и не хочет go в центре), визуализация Здесь

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

добавить css класс

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#0e1a33" />
	<title>Hotel Morenka Cipa</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link href="theme.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
		<a class="navbar-brand" href=""><img></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
		data-target="#navbarResponsive">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarResponsive">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Contact</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Ranking</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Support</a>
			</li>
		</ul>
	</div>
</nav>
	<footer class="footer fixed-bottom">
		Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
	</footer> 
///////////////////// add class here
<div class="centered">
	<div class=" d-dlex  justify-cointent-center align-items-center a div">
		<div class="d-dlex  justify-cointent-center align-items-center a div">
      <div class="card">
				<div class="card-body text-center">
					<h5 class="card-title mb-2">hihihihihih</h5>
						<div class="card-subtitle mb-3">hihihihi<a href="#" target="_blank">hihihihi</a></div>
		<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
		<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
		<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
		</form>
		</div>
		</div>
		</div>
		</div>
  </div>

</body>
</html>
0 голосов
/ 24 февраля 2020

Вы пытаетесь использовать align-items, который является свойством гибкого элемента, для элемента div, который не является гибким элементом.

Кроме того, вы пытаетесь выполнить выравнивание на экране, но ваш html и body не установлен height: 100%.

Чтобы продемонстрировать, вы можете добавить style="height: 100vh; display: flex;" к родителю div. Как вы можете видеть ниже, карта выравнивается по центру.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');











/*---Media Queries --*/
@media (max-width: 992px) {

  }
@media (max-width: 768px) {
  
}
@media (max-width: 576px) {
  
}

a {
  color: #d7eaf4;
}



body {
  color: #fff;
  background: #2834d8 url(img/hotel.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  font-family: poppins,Helvetica,Arial,sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}

.footer {
  font-size: 14px;
  padding-left: 1rem!important;
}

.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

.h-100 {
  height: 100%!important;
}


.navbar {
  background: rgba(18,13,33,.8);
  color: #d7eaf4;
  box-shadow: 0 5px 15px #000000c0;
  margin-top: 0;
  margin-bottom: 0;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#0e1a33" />
	<title>Hotel Morenka Cipa</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link href="theme.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
		<a class="navbar-brand" href=""><img></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
		data-target="#navbarResponsive">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarResponsive">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Contact</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Ranking</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Support</a>
			</li>
		</ul>
	</div>
</nav>
	<footer class="footer fixed-bottom">
		Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
	</footer>

	<div class=" d-dlex  justify-content-center align-items-center a div" style="height: 100vh; display: flex;">
		<div class="d-dlex  justify-content-center align-items-center a div">
			<div class="card">
				<div class="card-body text-center">
					<h5 class="card-title mb-2">hihihihihih</h5>
						<div class="card-subtitle mb-3">hihihihi<a href="#" target="_blank">hihihihi</a></div>
		<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
		<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
		<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
		</form>
		</div>
		</div>
		</div>
		</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...