如何垂直對齊圖片和文本 – HTML CSS對齊問題

一、使用line-height屬性

使用line-height屬性可以將文本垂直居中，方法如下：

    <div class="container">
        <img src="img.jpg" alt="image">
        <p class="text">Lorem ipsum dolor sit amet</p>
    </div>
    
    .container {
        display: flex;
        align-items: center;
    }
    
    .text {
        line-height: 100px; /*根據圖片高度設置*/
    }

這裡的line-height值需要根據圖片的高度進行設置，可以通過計算得出，但是這種方法只適用於單行文本。如果是多行文本，則需要將line-height設置為normal，同時利用flex屬性實現多行文本的垂直居中。

二、使用vertical-align屬性

在HTML中，圖片默認是基於文本的基線對齊的。因此，可以通過設置文本的vertical-align屬性來垂直對齊圖片。方法如下：

    <div class="container">
        <img src="img.jpg" alt="image">
        <p class="text">Lorem ipsum dolor sit amet</p>
    </div>
    
    .container {
        display: flex;
        align-items: center;
    }
    
    img {
        vertical-align: middle;
    }
    
    .text {
        display: inline-block;
        vertical-align: middle;
    }

這裡將文本設為inline-block元素，然後通過vertical-align屬性將圖片和文本都設置為middle, 實現垂直對齊。

三、使用transform屬性

還有一種方法是使用CSS的transform屬性，方法如下：

    <div class="container">
        <img src="img.jpg" alt="image">
        <p class="text">Lorem ipsum dolor sit amet</p>
    </div>
    
    .container {
        display: flex;
        align-items: center;
    }
    
    img {
        transform: translateY(-50%);
    }
    
    .text {
        margin: 0;
    }

這裡利用了transform: translateY(-50%)將圖片向上移動了50%的高度，然後將文本的margin設為0，實現垂直對齊。

四、使用table和table-cell屬性

最後一種方法是使用CSS的table和table-cell屬性，方法如下：

    <div class="container">
        <div class="cell">
            <img src="img.jpg" alt="image">
        </div>
        <div class="cell">
            <p class="text">Lorem ipsum dolor sit amet</p>
        </div>
    </div>
    
    .container {
        display: table;
    }
    
    .cell {
        display: table-cell;
        vertical-align: middle;
    }

這裡將父元素設為table元素，子元素設為table-cell元素，然後通過vertical-align屬性將圖片和文本都設置為middle, 實現垂直對齊。