如何在窗體中將圖像垂直居中放置一個按鈕元素？

我使用HTML和CSS來構建響應式單頁聊天應用程序的用戶界面。該界面必須包含用於提交消息的<form>元素。在<form>元素裏面我有<textarea>元素和<button>元素作爲提交按鈕。按鈕裏面必須有兩個圖像，一個在另一個的中心，經過大量的努力和搜索，我設法做到了。問題是我想要這<button>和<textarea>在同一行上，並在<form>垂直居中。我試圖搜查了很多的東西，可以幫助我，但沒有任何結果是我所需要的，有些是我的嘗試是基於以下鏈接答案：如何在窗體中將圖像垂直居中放置一個按鈕元素？

Vertically centering button using css

看到我的代碼在fiddle。

注意：我不允許使用CSS框架和樣式的ID。

我很感激任何幫助。謝謝！

來源

2017-08-02 user8244016

這是期望的效果嗎？ https://jsfiddle.net/MattDiMu/aj363t4b/ – MattDiMu

你正在嘗試做什麼？創建一個圖片你試圖實現的目標 –

不幸的是沒有 – user8244016

上textarea

CSS

textarea{ 
vertical-align:middle; 
}

來源

2017-08-02 07:02:16

我試過了，但後來按鈕進入表格頂部 – user8244016

您在按鈕內放置的圖片大小是多少？ –

背景是100％，裏面是寬度：45.0704％; 身高：22.831％; – user8244016

-1

使用vertical-align:middle;您可以通過給它的寬度，高度調整你的形象和所需保證金填充。

img { 
    width: 30px; 
    height: 30px; 
    background-color: red; 
}

對於居中對象，您可以使用margin：0 auto;

來源

2017-08-02 07:22:46

如何在窗體中將圖像垂直居中放置一個按鈕元素？

回答

相關問題