Simple alignment inside using vertical-align

Question

The vertical-align CSS property doesn't the desired effect, whether on the <form> or <input> tag.

Code:

<form style="vertical-align: center;">
    <input type="button" value="trial" />
    <textarea cols="80" rows="17"></textarea>
</form>

Answer 1

Are you attempting to position the "trial" button to the left and middle of the textarea? If so, try this:

<form style="display: flex;">
        <input type="button" value="trial" style="align-self: center"/>
        <textarea cols="80" rows="17"></textarea>
</form>

Answer 2

Attribute vertical-align does not accept the value of center. You should use a value of middle instead.

Answer 3

vertical-align doesn't accept center as a value but rather middle, and it centers elements vertically.

justify-* like justify-self, justify-items, or justify-content center elements horizontally (it accepts center as value not middle) so depending on the desired effect, you can center your elements.