如何使用 Javascript 在卡片上对齐带有动态标题的图像？

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

方法

  • 首先为您的卡片创建一个容器。这可以是 div 或 section 元素。

  • 在此容器内，添加一个 div 或 header 元素来容纳您的动态标题。确保为其提供唯一的类或 ID，以便稍后对其进行样式设置。

  • 接下来，将图像元素添加到卡片容器中。您可以使用 img 标签或 div 中的背景图像。

  • 使用 CSS 对齐卡片容器内的图像和标题。您可以使用 display: flex 属性水平或垂直对齐项目。

  • 要居中对齐图像和标题，您可以使用 justify-content 和 align-items 属性将其水平和垂直居中。

  • 如果要向卡片添加边框或其他样式，可以使用 border 和 background 属性自定义其外观。

  • 要动态更新标题，您可以使用 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>

解释

此示例创建了一个具有类“card-container”的容器 div，其中包含一个用于标题的 header 元素和一个图像元素。它使用 CSS 对齐容器内的元素，居中元素，并向容器添加边框和填充。它还使用 JavaScript 更改标题元素的 inner HTML 以动态更新它。

更新于： 2023年2月13日

1K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告