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

WBOY 转载: 2023-09-12 11:37:10 284浏览

我们可以通过使用 CSS 设置卡片容器内图像的位置和边距来对齐卡片中的图像。我们还可以使用 Flexbox 或 Grid 以特定方式对齐图像和标题。通过使用动态标题，我们可以根据用户输入或数据库中的数据更改卡片标题中显示的文本。

方法

首先为您的卡片创建一个容器。这可以是 div 或节元素。
在此容器中，添加 div 或 header 元素来保存动态标题。确保为其指定一个唯一的类或 ID，以便稍后设置其样式。
接下来，在卡片容器中添加图像元素。您可以在 div 中使用 img 标签或背景图像。
使用 CSS 在卡片容器内对齐图像和标题。您可以使用 display: flex 属性来水平或垂直对齐项目。
要使图像和标题居中，您可以使用 justify-content 和align-items 属性将它们水平和垂直居中。
如果要向卡片添加边框或其他样式，可以使用边框和背景属性自定义其外观。
要动态更新标题，您可以使用 JavaScript 更改标题元素的innerHTML 或textContent。
最后，测试您的卡片，确保图像和标题正确对齐，并且标题根据需要动态更新。

示例

这是一个带有动态标题和对齐图像的卡片的完整工作示例 -

<!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>