vertically center title on screen

KaiNie
KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 10 ☆ Roadie ☆
edited March 10, 2021 in Lectora Desktop
Hi there,

is there any way to center my titel verticvally on screen? Found out how to do thias horizontally, however it always sticks to the top of the screen which is not nice.

Tried to add something like position: absolute; top: 50%; transform: translate(0, -50%); to the css definition of the pageDIv container. (in a post publishing hack operation). And it almoste works.
Only the top:50% value always gets overwritten with top:0px; which destroys my approach.
If I could only get rid of the top:0px; issue.

Any ideas or even solutions out here?

Best Answer

  • timk
    timk Community Member Posts: 1,197 ♦ Idol ♦
    Accepted Answer
    I'd say, Run mode is not a suitable place to test custom code. In the end I don't really know at all what it's good for...

    I forgot about Seamless play. When you publish with Seamless play the CSS should also adress the pageDIV class:


    #pageDIV,.pageDIV{
    top: 50% !important;
    transform: translate(0, -50%);
    }

Answers

  • andrew-robertson
    andrew-robertson Community Member Posts: 185 ☆ Superstar ☆
    The centre vertically is in the same drop down menu as the centre horizontally - its all there. Are you trying to make it relative to the screen or something?
    Andrew R.
    Developing content since 2010 using a mixed bag of tools.
  • KaiNie
    KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 10 ☆ Roadie ☆
    edited March 11, 2021
    I have a fixed title size and just would like to center it vertically inside the browser window.
    currently it looks like this:

    however, would like to have it look like this:

    And I can only find the settings in the HTML Page alignment dropdown which lets me center horizontally only. Am I missing some settings?
  • timk
    timk Community Member Posts: 1,197 ♦ Idol ♦
    It should work when you make the CSS more important:


  • KaiNie
    KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 10 ☆ Roadie ☆
    Hey timk,

    thank you for the hint! :-)
    However ... this only makes my title disappear halfway in run-mode and the changes don't appear at all after publishing to html. :-(

    Any further idea or approach?
  • andrew-robertson
    andrew-robertson Community Member Posts: 185 ☆ Superstar ☆
    edited March 11, 2021
    Ahh yes, your screenshots help describe your issue much better, I am happy to be following this too as we have something similar. Doesn't overly bother me in terms of where it is displayed but I can apply it as a nice to have down the road.
    Andrew R.
    Developing content since 2010 using a mixed bag of tools.
  • KaiNie
    KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 10 ☆ Roadie ☆
    Hey timk,
    this works like charm (after I removed one extra exclamation mark which I added by mistake before ;-)

    thank you so much!

    Cheers,
    Kai