如何垂直对齐图片和文本 - 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, 实现垂直对齐。