HELP! A QUESTION ABOUT INLINE-BLOCK AND ALIGN...

[Odelia]

[Responsive Web Design Projects - Build a Tribute Page]
Tell us what’s happening:

I want to use inline-block to make image and text in one line, and make the text in center on vertial.
I give both of image and the text “display: inline-block;” and set the “line-height” equal to the “height” of the image. While there is a drop height between them. I want to know what happened and how to deal with it …
thank u sooooo much~

Your code so far

Document #author a { display: block; height: 100px; color: black; background-color: pink; text-decoration: none; line-height: 100px; }

    #author .author-img {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    #author-name {
        display: inline-block;
        line-height: 50px;
        color: black;
        background-color: grey;
    }
</STYLE>

Tara Westover

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

[DanielHuebschmann]

Hello!

Do you mean like this?

Give "id author a "

display: flex; 
align-items: center;

done!

You can remove all inline styles.

I also used

*{
padding: 0;
margin 0;
}

this will remove all default margins and paddings and makes styling much easier!

[Odelia]

Thanks for answer! I’ve spent 1h on it and it is soooo easy to solve…

[DanielHuebschmann]

Lol, it’s developers daily grind, sometimes a missing “=” will break your code and you spend an hour looking for the spot

[Odelia]

But I still wonder why it did not work in my code

[DanielHuebschmann]

I know the mods don’t like posting solutions but I hope I get a pass this time , Odelia spent long enough on the problem.

make sure put the flex on the parent container