eLBX Online 2021 | June 22 - 24

Join us for a FREE, 3-day virtual conference featuring industry experts and eLearning thought leaders. Learn about critical topics such as eLearning accessibility, learning experience design, course authoring, virtual reality, and gamification. Register today!

Vertical text alignment in text boxes

divanov9498 Community Member Posts: 7
I am not sure if this has been suggested previously, but one feature I would like to see is the ability to vertically align text in text boxes.


  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    How would you imagine this feature to be different then stretching the text box?
  • klaatu
    klaatu Community Member Posts: 988
    Hi Drago. One of the strength's of Lectora is in its ability to extend its capabilities using the HTML Extension. In this case you want to add your own Cascading Style Sheet (CSS) to adjust the text box padding. This may sound like a daunting task but trust me it is so simple and powerful that you'll find yourself using it a lot.

    To do this open up notepad and type out the following:


    padding-top: 20px;


    Now go to save this (save as) but when you do change the .txt extension to "All Files" and save it as myStyles.css.

    If you've never done this before, congratulations, you just created your first cascading style sheet. The .myTextBox (the period is important) is called a selector. In this case it is a custom class. The stuff you put between the curly brackets ({})are called Declarations and they contain property:value pairs. Our declaration is to assign the top padding (padding-top) a value of 20 pixels (px). This will adjust the vertical alignment you are asking for. Each property value pair must end with a semi-colon. The attached graphic is called the box model and you can see which properties you can declare. This is powerful stuff. If you want to move the text over away from the left side of the text box adjust the padding-left property, etc. Experiment, it's fun.

    Back in Lectora insert an HTML Extension. Change the type to Cascading Style Sheet and browse to point to the file you just saved.

    Now for the last important part. Go to the text box you want to assign this rule and in its appearance tab click the little down arrow icon to the right of the word appearance. A requested box should open allowing you to enter a class name. In there type the name of the class you created without the period this time (that's a little confusing, I know, but it is what it is). Preview and viola! Adjust the pixel amount(s) and properties to your liking. You can add the same class to any number of text boxes.

    My two cents. While I understand that it may be easier to have something like this built in I believe it would be more cost effective for the end user, considering I'm sure that development costs are built into the programs price, if Trivantis dedicated their development time to offering more complicated features such a Boolean logic in actions and page tracking (visited of page = true/false). A little bit of web design knowledge goes a long way in building e-learning. I hope this helps.


    p.s. I almost forgot to mention. Save the CSS file you created and use it in any number of projects, it's reusable. This is a time saver and you can keep the same styling from project to project. Check out this link to see a list of the properties you can declare with CSS!
  • divanov9498
    divanov9498 Community Member Posts: 7
    Thank you, Darrel. This is most certainly an advise I will follow in my development in the future...
  • kain
    kain Community Member Posts: 28
    Hi Darrel,

    thank you for your post and explanation.

    Seems to go into the right direction for me, but I cannot get it running. :-(

    Would also like to have something more flexible to be able to use this class on different text boxes with varying line numbers, heights etc.

    Any suggestions or ideas?

  • klaatu
    klaatu Community Member Posts: 988
    Not sure why its not working for you. I attached a sample that has three text boxes styled in three different ways. A few things to note:

    Lectora places the actual text in a span. The span is inside a paragraph which resides in the div that is assigned the HTML name of your text box. When you add a class via the appearance tab you are adding it to the div (parent element).

    Also, Lectora places styling for most objects inline. Inline styling has a higher specificity and takes precedence over externally styled elements. You can usually force a rule to take precedence by using the !important declaration but use it sparingly and only when there are no other options.

    If you need specific assistance, message me so we do not clog up the forum. It would help if you included an emaple of what you are having trouble with.


  • kain
    kain Community Member Posts: 28

    thank you for your help and for the sample title.

    It looks also good for me, meaning the styles you added to the text are displayed properly. The challenge I face is that I did not manage to center the text in the text box vertically. I am probably lacking css skills! ;-)

    Best, Kai
  • divanov9498
    divanov9498 Community Member Posts: 7
    I am looking at positioning text in the absolute centre of the text box. Once I am done, I will post on the forum. If someone out there has already worked it out, please post your solution.
  • klaatu
    klaatu Community Member Posts: 988
    There are multiple ways to do this (read above) however in the interest of saving you time this is probably the easiest. Add a style sheet with the following and then assign the class through the appearance menu.

    .centerMe {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    Attached example in version 12.


  • divanov9498
    divanov9498 Community Member Posts: 7
    Why try to re-invent the wheel indeed, Darrel. Thank you!

    A lekker (Afrikaans) tip.
  • jackgayler
    jackgayler Community Member Posts: 46 ♪ Opening Act ♪
    Hi Jennifer,


    I believe this a basic feature that is a MUST in any authoring tool.

    I am also a user of Articulate Storyline and find I use the Vertical Align Text feature countless times. It's a quick and easy way of making sure text is aligned correctly without having to worry about margins and paragraph spacing.


    Many of the courses I produce need to be translated into numerous languages, currently, after every translation, we have to go in and make sure text is vertically aligned correctly as the amount of text shrinks/grows. If the text was automatically vertically aligned, we wouldn't have to worry about this at all.


    It's a really simple feature and I would love to see it added to Lectora, please!

Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!