如何在html/css中将文本与图像对齐

<style>
    img {
        float: left;
    }
    .text {
        text-align: left;
    }
</style>

<div>
    <img src="image.jpg">
    <div class="text">
        这是一段文本。
    </div>
</div>

<style>
    .container {
        display: flex;
        align-items: center;
    }
    .text {
        text-align: center;
    }
</style>

<div class="container">
    <img src="image.jpg">
    <div class="text">
        这是一段文本。
    </div>
</div>

<style>
    .container {
        position: relative;
    }
    img {
        position: absolute;
        top: 0;
        right: 0;
    }
    .text {
        text-align: left;
    }
</style>

<div class="container">
    <div class="text">
        这是一段文本。
    </div>
    <img src="image.jpg">
</div>