# CSS HTML怎么讓同一行的圖片和文字居中對齊
在網頁布局中，讓同一行的圖片和文字垂直居中對齊是常見需求。以下是幾種實現方法：
## 方法一：使用`vertical-align`屬性
```html
<div class="container">
<img src="image.jpg" alt="示例圖片" class="icon">
<span class="text">居中對齊的文字</span>
</div>
.container {
line-height: 50px; /* 設置行高與容器高度相同 */
}
.icon {
vertical-align: middle; /* 關鍵屬性 */
}
.text {
vertical-align: middle;
}
.container {
display: flex;
align-items: center; /* 垂直居中 */
}
.container {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
.container {
position: relative;
height: 50px;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 40px; /* 圖片寬度 */
}
display: inline-blockvertical-align解析可能有差異推薦優先使用Flexbox方案，代碼簡潔且現代瀏覽器支持良好。如需兼容舊瀏覽器，可采用vertical-align方案作為降級方案。
“`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
