如何將 div 與文本垂直對齊

Question

我已經被這個問題困住了一段時間。 為了更好地解釋我在這里問的問題，有一張圖片：圖片

希望這會有所幫助。 這是我的代碼：

 .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>

所以我想要做的是讓 div 與文本垂直對齊。 提前致謝！

Answer 1

使用 devtools 進行故障排除。 如果您專注於<p>元素，您會看到它有 20 像素的邊距。

 .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>