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

使用Flexbox

您可以尝试

HTML

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

CSS

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

使用CSS在图像旁边垂直对齐文本

1 个答案:

使用Flexbox