How to vertically align a div with text

Question

I've been stuck on this problem for a while. To better explain the question that I'm asking here is a picture: Picture

Hopefully that helps a bit. Here is my code:

 .Home { background-color: white; padding: 35px 60px; }

 <p style="text-align: right; background-color: #e9e9e9;font-family:arial;font-size:20px;">upper message</p> <div style="text-align:center;background-color:black;"> <img src="/Images/logo-text.png" width="250" hight="240" align="left"> <button class="Home">Home</button> </div>

So what I'm trying to do is have the div align with the text vertically. Thanks in advance!

Answer 1

Use devtools to troubleshoot. If you focus on your <p> element you'll see that it has 20px margin.

 .Home { background-color: white; padding: 35px 60px; } p { margin: 0; }

 <p style="text-align: right; background-color: #e9e9e9;font-family:arial;font-size:20px;">upper message</p> <div style="text-align:center;background-color:black;"> <img src="/Images/logo-text.png" width="250" hight="240" align="left"> <button class="Home">Home</button> </div>