how do I vertically center a button element with an image inside a form?

Question

I am building user interface for responsive single page chat application using HTML and CSS. The interface must include a <form> element for submitting a message. Inside the <form> element I have <textarea> element and <button> element as submit button. The button must have inside it two images one centered on the other, and after a lot of effort and searchs I managed to do that. The problem is that I want this <button> and <textarea> to be on the same line and vertically centered in the <form>. I tried and searched a lot for something that may help me but none of the results was what I need,some of the what I tried is based on the answers in the following link:

Vertically centering button using css

see my code in fiddle.

Note: I am not allowed using CSS frameworks and no IDs for styling.

I appreciate any help. Thank you!

Is this the desired effect? https://jsfiddle.net/MattDiMu/aj363t4b/ — MattDiMu, Aug 02 '17 at 07:07
what you are trying to do ? create an image what you trying to achieve — Jishnu V S, Aug 02 '17 at 07:08
@Jishnu V S I want to vertically center the button in the form — user8244016, Aug 02 '17 at 07:09
@giorgio thank you and for all who tried to help me , but why did my question got a minus? what's wrong with it? — user8244016, Aug 02 '17 at 08:02

score 0 · Answer 1 · answered Aug 02 '17 at 07:02

0

use vertical-align:middle; on textarea

CSS

textarea{
vertical-align:middle;
}

answered Aug 02 '17 at 07:02

Chandra Shekhar

3,550
2
14
22

I tried but then the button goes to the top of the form – user8244016 Aug 02 '17 at 07:03
what is the image size you placed inside the button? – Chandra Shekhar Aug 02 '17 at 07:05
the background is 100% and the one inside is width: 45.0704%; height: 22.831%; – user8244016 Aug 02 '17 at 07:07
@sherenelias can you post a image about the issue you are facing – Chandra Shekhar Aug 02 '17 at 07:21

score -1 · Answer 2 · answered Aug 02 '17 at 07:22

-1

You can adjust your image by giving it width, height and required margin padding.

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

For centering objects you can use margin: 0 auto;

answered Aug 02 '17 at 07:22

Mustafa Khan

16
1

how do I vertically center a button element with an image inside a form?

2 Answers2