使用CSS垂直对齐图像旁边的文本[重复]

Question

我正在尝试将内联块的内容垂直居中，但我无法弄清楚。我尝试了在这里找到的不同选项，例如 flex 和 transform，但它们都不适合我。我可能错过了什么。

这个想法是有几个 div（步骤），每个图像在左侧，一些行在右侧，垂直居中。

感谢任何帮助

HTML：

<div class="med-step-wrapper">

    <div class="med-step">

        <div class="med-step-logo">
            <img alt="step 1" src="imagesource"/>
        </div>

        <div class="med-step-text">

            <p>1. Register

            <p>Morbi ut egestas urna, et interdum dolor. Duis fermentum orci in
nisi egestas, et imperdiet mauris luctus. Praesent vulputate diam 

            <p><button>

        </div>

    </div>

</div>

CSS：

.med-step-wrapper {
    width: 95%;
    margin: 0 auto;
}

    .med-step {
        width: 100%;
    }

    .med-step-logo {
        width: 33%;     
        display: inline-block;
        padding: 3rem;
    }

        .med-step-logo img {
        width: 100%;        
        height: auto;
    }   

    .med-step-text {
        width: 66%;
        display: inline-block;
        font-family: 'DIN1451EngschriftRegular';
    }

    .med-step-text p {



    }

Answer 1

使用弹性盒

你可以试试这个

HTML

<div class="parent">
  <img src="...">
  <div> Text </div>
</div>

CSS

.parent{
 display:flex;
 align-items:center
}