0
votes

Alignement d'un article à la fin d'une carte sensible, avec centrage vertical

Je tente d'aligner un élément, dans ce cas une icône géniale de police, à la fin d'une carte de taille réactive (largeur sage). J'ai du mal à faire fonctionner ça. Voici mon HTML pour ma carte: xxx

Comme vous pouvez le voir, le chevron ne reste pas à la fin de la carte. Toute aide appréciée, merci.

Voici ce que je veux que cela ressemble:

javascript html css bootstrap-4 twitter-bootstrap

2 commentaires

Pouvez-vous fournir une capture d'écran de la façon dont vous voulez que ce soit?

Fait. Le chevron doit rester à la fin de la carte, même lorsque la taille de la carte change de largeur sage. (C'est réactif)

3 Réponses :

1
votes

Mise à jour!

Ajoutez un positionnement absolu, définissez le haut à 50% et transformez y sur -50% pour prendre en compte la hauteur de l'icône p>

<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas chevron fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>

5 commentaires

Je viens d'ajouter ceci au Codepen et malheureusement, il ne semble pas fonctionner, voir ici: CODEPEN.IO/ DARLTON29 / PEN / WVKQYBN Le Chevron n'est pas à la fin de la carte, pas au centre verticalement.

Je vois, je ne me suis pas rendu compte que. Je pense que vous devrez vous donner une position absolue avec droite: 0, position: absolu; TOP: 50%; Transformer: Traducty (-50%);

Supprimer la balise P

Oui, c'était ça - gars ci-dessus l'a eu juste avant de le faire, merci cependant.

Heureux de tous trier

0
votes

Vous pouvez le pousser à la fin à l'aide de Margin-gauche: 100% code>:

p>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>

0 commentaires

1
votes

Meilleur moyen de faire ceci est comme ceci:

Un bit change sur la structure HTML, il suffit de tirer l'icône en dehors de la voiture de carrelage div xxx

< Strong> CSS xxx

6 commentaires

Merci, cela fonctionne parfaitement. L'ALIGN-SOCI-CENTRE & MYCARD peut également être retiré de ce qui précède, car ils ne sont pas nécessaires. Existe-t-il un moyen de faire cela qui prend en charge

C'est génial :) Vous êtes les bienvenus. Et assurez-vous de pouvoir en compiler votre code CSS à l'aide de cet outil préfixe automatique

Merci, je suis un peu confus- quelle est cette chose à faire exactement, et comment cela changerait-il de transformer: Traduire (0, -50%); dans quelque chose, c'est-à-dire des supports?

Aucun problème, Auto Prefixer convertira votre code CSS et ajoutera un préfixe approprié qui fonctionne sur différents navigateurs qui ne prennent pas en charge certaines propriétés (telles que transformer, flex et grille ... etc.)

C'est vraiment cool, je ne savais pas à ce sujet, alors merci. Je vais essayer de l'utiliser dans le futur- Y a-t-il un moyen facile de tester c'est-à-dire sans une machine virtuelle?

Bon pour vous :) Et désolé je ne sais rien de tel, désolé. Bonne chance