Anyone know how to center text (vertically) in a text box?
November 10, 2021 12:00 AM
I'm tired of having to manually scale text boxes vertically to fit my content, especially when I'm trying to get it to align vertically with elements such as radio buttons and images. It would be so much easier if there was a button set similar to text align left, right, and center - but was text align top, middle, bottom. (And remember - this isn't align to page. This is align within the text box itself.) Any ideas or methods would be greatly appreciated.
Discussion (4)
How do you feel about creating a box shape behind the (transparent) text box and center aligning the text with that?
You can use the text box Margin property, but this might not yield exactly what you are looking for. Vertically aligning text in a text box is not a current feature of Lectora. However, we are always refining our products, so if you would, please enter a request in the Lectora Feature Request section of the community.
When published, the published output of Lectora is a web application using HTML, CSS and javascript. You are free to add CSS or javascript or jQuery to your project to further refine the appearance of your project. For example, you could add this CSS to use flexbox to vertically align the text within each text box div:
.ttxt {
display: flex;
justify-content: center;
align-items: center;
}
This image shows four text boxes all aligned on their centers with text placed in each box and the above CSS in an HTML extension in the course. Edit Mode shown on the top, Preview in browser on the bottom.
You could also use padding or line-height to vertically align the text. Maybe use a jQuery command to find the height of each .ttxt div and apply the appropriate line-height or padding commands to each text box. Some examples are here at W3 schools. Maybe someone in the community could take the information at W3 Schools and create a jQuery command to apply the CSS programmatically to all the text boxes on a page or within a course.
Thanks again for the suggestion. Please post your suggestion in the Lectora Feature Requests section so the Community can weigh in on the feature.
@jholland - yea, that's a pretty darn decent work-around, but it sure would be nice to have that core feature in there. Thanks for the comment.
Sure would be nice if you documented how to do that. I may have mentioned this before. Dozens of times. Over a decade or more.