Vertical Alignment in Textarea

Hi, I want to vertically align text in Textarea. I have tried this so far:

In styles: vertical-align: middle;

and I’ve tried these from bootstrap: (Class) https://getbootstrap.com/docs/4.0/utilities/vertical-align/

Can’t get any of the above to work.

Does anone know an easy way to do this
Thanks
Will.

With Bootstrap 4 textarea this would work at property style: text-align: center
The header can be centered too by setting class property to text-center

Thanks for getting to me, yes that aligns text centre (horizontally). What I want to do is to place text in the middle of the Textarea (vertically) as well as horizontally.

Sorry. Some people say that textarea does not recognize vertical-align: middle. Workaround should be with calculating top, bottom, margin in percent and auto.

No I couldn’t get it to work. There are margins in the properties window in design but when I try to set left and top margins in % it just moves the whole Text area. I’ll just play around with the style and class properties with the margins to see if I can figure it out.
Thanks
Will.

I stopped working with textarea some time ago because I could not solve certain tasks with textareas. Nowadays I do use BS4 cards instead. Cards are fine to fit my purposes. Perhaps I never felt the necessity to vertically align text, because I built the text container just the size it needed to contain the text and adjusted only the vertical position of the container.

At least with Card I seem to have got it working after having found a solution by internet research. I added a style named block at ProjectCSS:

.block {
    border: 1px solid blueviolet;
    height: 150px;
    display: table-cell;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

This presumably can be improved.
At card class property I set class as well as textClass to “block”. This is the visible result:


Update, with css a bit improved:
.blockout {
border: 1px solid blueviolet;
display: table;
height: 310px;
align-items: center;
justify-content: center;
vertical-align: middle;
}

.blockin {
border: 1px solid green;
display: table-cell;
height: 270px;
align-items: center;
justify-content: center;
vertical-align: middle;
}

1 Like