如何在 Javascript 中將卡片上的圖像與動態標題對齊？
- WBOY轉載
- 2023-09-12 11:37:10621瀏覽
我們可以透過使用 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>
說明
此範例使用類別「card-container」建立一個容器 div，其中包含標頭 標題元素和圖像元素。它使用 CSS 來對齊元素 容器，將元素居中，並在容器中添加邊框和填充。它還使用 JavaScript 會變更標題元素的內部 HTML 以動態更新它。
以上是如何在 Javascript 中將卡片上的圖像與動態標題對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除