0
votes

Centrer la carte verticalement sur l'arrière-plan à l'aide de Bootstrap

Juste pour que ce soit clair avant de marquer comme republication, tout cela ne fonctionne pas: Comment centrer les cartes dans bootstrap 4? Comment aligner une image au point mort avec bootstrap Centrage de l'image dans Bootstrap Comment puis-je centrer une image dans Bootstrap? Comment centrer une image dans Bootstrap? Comment aligner un

au milieu (horizontalement / largeur) de la page Comment centrer horizontalement une

Cela dit, mon problème est simple, j'ai deux divs, le div d'arrière-plan et le div de carte de bootstrap. mx-auto se centra verticalement très bien, mais il est impossible de débloquer du haut de la carte. Pour que j'aie également de l'espace au-dessus et en dessous de la carte. J'ai essayé toutes les classes m et p. Ainsi que des classes personnalisées. Quelqu'un peut-il m'aider, s'il vous plaît. J'aimerais que ma carte soit au milieu de l'écran.

ooooooooooo
ooooxxxoooo
ooooxxxoooo
ooooooooooo

Elle ressemble maintenant à ceci:

ooooxxxoooo
ooooxxxoooo
ooooooooooo
ooooooooooo

Je voudrais:

<div class="bg">
<div class="card card-design success-design mx-auto">
<div class="card-body">

html css twitter-bootstrap

2 commentaires

Vos "images" montrent que vous voulez le centrer verticalement, mais vous parlez "horizontalement".

ben c'est la limite du langage, j'y ai pensé, et il semble que les deux peuvent être vrais en même temps

3 Réponses :

1
votes

Vous devrez peut-être utiliser du CSS pour que le corps s'étire à pleine hauteur, afin que vous puissiez centrer la carte, ceci est un exemple en utilisant flexbox

<div class="card">I am a card</div>

html, body {
	height: 100%;
}

body {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card {
	padding: 1rem;
	border: 1px solid;
}

3 commentaires

Merci, cela a empêché mon image de fond d'être affichée au-delà de la carte. Cependant, la carte est toujours attachée au dessus.

pourriez-vous fournir un exemple de code? peut-être codepen. Cela aiderait à mieux comprendre le problème

voici un codepen mais l'affichage généré est faux bien sûr codepen.io/ilanoh/pen/rodvVM

1
votes

essayez ceci:

<body>
        <div class="bg">
                <div class="card card-design success-design mx-auto">
                        <div class="card-body">
                        <h3 class="card-title"> bla bla bla</h3>
                        <h4 class="card-subtitle mb-2 text-muted"> bla bla bla</h4>
                        <h4 class="card-subtitle mb-2 text-muted"> bla bla blam</h4>
                        <br>
                        <br>
                        <p class="card-text nbr-apt">Merci bla bla bla</p>
                        </div>
                </div>
        </div>
  </body>

body, html {
  height: 100%;
}

h3, h4, p, a, label {
        color: #001f3f;
}

.bg {
  /* The image used */
  background-image: url('exemple.png');

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* i added following code */
  display:flex;
  justify-content:center;
  align-items:center;
}

.card-design {
        background-color: rgba(245, 245, 245, 0.7);
        width: 23rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        border-radius: 0 !important;
}

.success-design {
        background-color: rgba(245, 245, 245, 0.8);
}

.nbr-apt {
        font-size: 220%;
        font-weight: 100;
}

.rdv {
        font-size: 160%;
}

.num {
        font-weight: bold;

1 commentaires

avec code à 3 lignes. j'ai ajouté dans .bg {} que j'ai montré là-bas.

1
votes

Si vous utilisez Bootstrap 4 , vous devez utiliser ses classes utilitaires.

Ajoutez simplement d-flex justify-content-center align-items-center classes à la racine div et son contenu sera centré horizontalement et verticalement:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bg d-flex justify-content-center align-items-center">
  <div class="card">
    <div class="card-header">My card</div>
    <div class="card-body">Some text</div>
  </div>
</div>

.bg {
  background-color: #fff0f0;
  width: 300px;
  height: 300px;
}

.card {
  width: 50%;
  height: 50%;
}

0 commentaires