Essayer de centrer la carte verticalement entre l'en-tête et le pied de page, et la carte doit être au deuxième étage puisque l'en-tête et le pied de page sont au premier étage, pour éviter un mauvais comportement réactif, comme une impression excessive de la carte sur l'en-tête et le pied de page. Voici ma situation actuelle: LINK Je suis plus récent de bootstrap, chaque suggestion est appréciée.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="/img/unknow16.png" height="32" alt="Unknow TV">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Sign In <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<br><br>
<div class=" w-50 card ">
<div class="card-header">
Login
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<!-- <div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<footer class="footer text-center">
<p> </p>
<div class="container ">
<span class="text-muted">
© <script type="text/javascript">
document.write("2018 - "+ new Date().getFullYear());
</script>2018 - 2020 Weyland-Yutani</span>
</div>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
.card {
margin: 0 auto;
/* Added */
float: none;
/* Added */
margin-bottom: 10px;
/* Added */
}
footer {
position: fixed;
height: 55px;
bottom: 0;
width: 100%;
background-color: #343A40;
vertical-align: middle;
vertical-align: middle;
}
3 Réponses :
.card { <!-- Delete existing card code -->
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Merci @ aparep7474, je l'ai mis à jour comme votre suggestion: www.unknow.tv/prova6.php, le seul problème maintenant est que le menu déroulant de l'en-tête se trouve au deuxième étage au lieu de la carte est la première, donc avec certaines résolutions, la carte est sur la liste déroulante
Le problème maintenant est que la carte est au-dessus de la liste déroulante, n'est-ce pas? Voulez-vous juste que le menu déroulant soit dans l'autre sens sur la carte
Essayez d'ajouter un nouvel élément dans le DOM, faites de la carte un enfant de celui-ci et ajoutez les styles suivants, en utilisant Flexbox Model ceci est facilement réalisable.
Bien sûr, supprimez les balises br car elles ne sont pas nécessaires.
<div class="card-container">
<div class="w-50 card">
...
</div>
</div>
.card-container {
display: flex;
align-items: center;
height: calc(100% - 110px);
justify-content: center;
}
Bonne chance!
grâce aux suggestions, maintenant la carte est centrée, la liste déroulante ne change plus jamais le contenu, mais avec moins de résolutions, la carte est au-dessus du haeder, je dois la placer au deuxième étage et l'en-tête au premier
Pour corriger cette erreur, ajoutez simplement le style z-index: 1 à la navigation et z-index: -1 à la carte qui devrait le faire. J'étais confus parce que je n'avais pas le même point de vue que vous.
Super, réparé, merci!
pas de problème, épinglez-moi si vous avez besoin de plus d'aide
Merci! en fait, le problème est que z-index m'évite de taper le formulaire d'entrée @ aparep7474
Vous voulez donc le centre de celui-ci au milieu de la page?
oui, en essayant d'éditer .cent css je pense
L'en-tête a un menu déroulant qui déplace tout le contenu ci-dessous, peut-être que le meilleur comportement serait que le menu déroulant remplace le contenu au lieu de le déplacer.
Ok ma réponse devrait l'empêcher de déplacer le contenu ci-dessous
Postez le code dans la question s'il vous plaît