-3

I'm trying to vertically center the content of an inline-block and I can't figure it out. I've tried different options I've found here such as the flex and the transform but none of them worked for me. I'm probably missing something.

The idea is to have several divs (steps) with one image each on the left and some lines on the right, centered vertically.

Any help is appreciated

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 {



    }
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sanne Tuin
  • 41
  • 4
  • I believe you would help yourself if you created elements with defined end tags like `

    stuff

    ` and `` Just because you can omit end tabs does not mean it is always a good idea IMHO A button requires both start and end tags     – Mark Schultheiss Feb 17 '19 at 12:53

1 Answers1

1

Use Flexbox

You can try this

HTML

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

CSS

.parent{
 display:flex;
 align-items:center
}
Community
  • 1
  • 1
Xitish
  • 298
  • 5
  • 18
  • very similar to the linked duplicate accepted answer – Mark Schultheiss Feb 17 '19 at 12:58
  • I didn't know about that. What can I do now ? Delete the answer ? – Xitish Feb 17 '19 at 13:01
  • You can remove if you desire, yours is not actually wrong here - given that your solution does not actually use the HTML from the question to prove it works it is such.....up to you if you wish to revise to use the HTML as presented in a snippet.. – Mark Schultheiss Feb 17 '19 at 13:13