Maison > Article > interface Web > Comment aligner une image sur une carte avec un titre dynamique en Javascript ?

Comment aligner une image sur une carte avec un titre dynamique en Javascript ?

WBOYavant: 2023-09-12 11:37:10566parcourir

如何在 Javascript 中将卡片上的图像与动态标题对齐？

Nous pouvons aligner les images de la carte en définissant la position et la marge de l'image dans le conteneur de la carte à l'aide de CSS. Nous pouvons également utiliser Flexbox ou Grid pour aligner les images et les titres d'une manière spécifique. En utilisant des titres dynamiques, nous pouvons modifier le texte affiché dans le titre de la carte en fonction des entrées de l'utilisateur ou des données de la base de données.

Méthode

Commencez par créer un conteneur pour votre carte. Cela peut être un élément div ou section.
Dans ce conteneur, ajoutez un élément div ou header pour contenir le titre dynamique. Assurez-vous de lui attribuer une classe ou un identifiant unique afin de pouvoir le styliser plus tard.
Ensuite, ajoutez l'élément image à l'intérieur du conteneur de la carte. Vous pouvez utiliser la balise img ou l'image d'arrière-plan dans div.
Alignez les images et les titres dans les conteneurs de cartes à l'aide de CSS. Vous pouvez utiliser la propriété display: flex pour aligner les éléments horizontalement ou verticalement.
Pour centrer les images et les titres, vous pouvez les centrer horizontalement et verticalement à l'aide des propriétés justifier-content et align-items.
Si vous souhaitez ajouter une bordure ou un autre style à votre carte, vous pouvez personnaliser son apparence à l'aide des propriétés de bordure et d'arrière-plan.
Pour mettre à jour dynamiquement le titre, vous pouvez utiliser JavaScript pour modifier le innerHTML ou le textContent de l'élément title.
Enfin, testez votre carte pour vous assurer que l'image et le titre sont correctement alignés et que le titre est mis à jour dynamiquement selon les besoins.

Exemple

Voici un exemple entièrement fonctionnel de carte avec un titre dynamique et une image alignée -

<!DOCTYPE html>
<html>
<head>
   <title>Align Images</title>
   <style>
      .card-container {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
         border: 1px solid #ccc;
         padding: 10px;
         margin: 10px;
      }
      .card-title {
         font-size: 24px;
         font-weight: bold;
         text-align: center;
         margin-bottom: 10px;
      }
      img {
         max-width: 100%;
      }
   </style>
</head>
   <body>
      <div class="card-container">
      <header class="card-title">My Title</header>
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" class="card-image">
      </div>
      <script>
         let title = document.querySelector('.card-title');
         let newTitle = "New Dynamic Title";
         title.innerHTML = newTitle;
         title.style.color = 'black';
      </script>
   </body>
</html>

Instructions

Cet exemple utilise la classe "card-container" pour créer un conteneur div contenant l'en-tête Éléments de titre et éléments d’image. Il utilise CSS pour aligner les éléments Conteneur, centre l'élément et ajoute des bordures et un remplissage au conteneur. Il utilise également JavaScript modifie le code HTML interne de l'élément titre pour le mettre à jour dynamiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html innerHTML display flex 数据库

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment convertir les valeurs de pixels en valeurs numériques à l'aide de JavaScript ?Article suivant：Comment convertir les valeurs de pixels en valeurs numériques à l'aide de JavaScript ?

Articles Liés

Voir plus