Article Categories

Selected Reading

How to align images on a card with a dynamic title in Javascript?

Javascript Web Development Front End Technology

Aligning images on a card with dynamic titles in JavaScript involves using CSS for layout and JavaScript for dynamic content updates. This creates responsive, interactive card components commonly used in modern web applications.

Approach

Create a card container using a div or section element with appropriate CSS classes.
Add a header element for the dynamic title with a unique class or ID for styling and JavaScript targeting.
Include an image element within the card container using the img tag or background image.
Use CSS Flexbox properties like display: flex, justify-content, and align-items to control alignment.
Apply responsive design principles using max-width: 100% for images to ensure proper scaling.
Use JavaScript to dynamically update the title content via innerHTML or textContent.
Test the card layout across different screen sizes and title lengths to ensure proper alignment.

Example: Basic Card with Dynamic Title

Here is a complete working example demonstrating image alignment with a dynamic title:

<!DOCTYPE html>
<html>
<head>
   <title>Dynamic Card Alignment</title>
   <style>
      .card-container {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         border: 2px solid #ddd;
         border-radius: 8px;
         padding: 20px;
         margin: 20px auto;
         max-width: 300px;
         box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      }
      
      .card-title {
         font-size: 24px;
         font-weight: bold;
         text-align: center;
         margin-bottom: 15px;
         color: #333;
         min-height: 30px;
      }
      
      .card-image {
         max-width: 100%;
         height: auto;
         border-radius: 4px;
      }
      
      .update-btn {
         margin-top: 15px;
         padding: 10px 20px;
         background-color: #007bff;
         color: white;
         border: none;
         border-radius: 4px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <div class="card-container">
      <header class="card-title">Original Title</header>
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" 
           class="card-image" alt="Sample Image">
      <button class="update-btn" onclick="updateTitle()">Update Title</button>
   </div>
   
   <script>
      const titles = [
         "Dynamic Title 1",
         "Responsive Card Design", 
         "Image Alignment Demo",
         "JavaScript Card Component"
      ];
      let currentIndex = 0;
      
      function updateTitle() {
         const titleElement = document.querySelector('.card-title');
         currentIndex = (currentIndex + 1) % titles.length;
         titleElement.textContent = titles[currentIndex];
         titleElement.style.color = `hsl(${currentIndex * 90}, 60%, 40%)`;
      }
      
      // Auto-update title every 3 seconds
      setInterval(updateTitle, 3000);
   </script>
</body>
</html>

Advanced Example: Multiple Alignment Options

This example demonstrates different alignment strategies for cards:

<!DOCTYPE html>
<html>
<head>
   <title>Card Alignment Variations</title>
   <style>
      .card {
         border: 1px solid #ccc;
         border-radius: 8px;
         padding: 15px;
         margin: 10px;
         width: 250px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      
      .vertical-card {
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      
      .horizontal-card {
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 15px;
      }
      
      .card-title {
         font-size: 18px;
         font-weight: bold;
         margin: 10px 0;
      }
      
      .card-image {
         max-width: 100px;
         height: auto;
         border-radius: 4px;
      }
   </style>
</head>
<body>
   <div id="card1" class="card vertical-card">
      <h3 class="card-title">Vertical Layout</h3>
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" 
           class="card-image" alt="Tree">
   </div>
   
   <div id="card2" class="card horizontal-card">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" 
           class="card-image" alt="Tree">
      <h3 class="card-title">Horizontal Layout</h3>
   </div>
   
   <script>
      function updateCardTitle(cardId, newTitle) {
         const card = document.getElementById(cardId);
         const titleElement = card.querySelector('.card-title');
         titleElement.textContent = newTitle;
      }
      
      // Update titles dynamically
      setTimeout(() => {
         updateCardTitle('card1', 'Updated Vertical Title');
      }, 2000);
      
      setTimeout(() => {
         updateCardTitle('card2', 'Updated Horizontal Title');
      }, 4000);
   </script>
</body>
</html>

Key CSS Properties for Image Alignment

Property	Purpose	Common Values
`display: flex`	Enable flexbox layout	flex, grid
`flex-direction`	Control layout direction	column, row
`align-items`	Cross-axis alignment	center, flex-start, flex-end
`justify-content`	Main-axis alignment	center, space-between, space-around

JavaScript Methods for Dynamic Updates

textContent - Updates text content safely, prevents XSS attacks
innerHTML - Updates HTML content, allows HTML tags but requires caution
querySelector() - Selects elements using CSS selectors
addEventListener() - Adds event listeners for user interactions

Conclusion

Aligning images on cards with dynamic titles combines CSS Flexbox for layout control and JavaScript for content updates. Use flex-direction to control vertical or horizontal alignment, and textContent for safe dynamic title updates. This approach creates responsive, interactive card components suitable for modern web applications.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next