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

Question

这个问题在这里已有答案：

• Vertically align text next to an image? 20个答案

我试图垂直居中一个内联块的内容，我无法弄明白。我已经尝试了我在这里找到的不同选项，例如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

Use Flexbox

你可以试试这个

HTML

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

CSS

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