vertically center title on screen

KaiNie
Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 4 ☆ Roadie ☆
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?
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?
0
Best 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%);
}
1
Answers
-
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?0
-
KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 4 ☆ Roadie ☆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?0 -
It should work when you make the CSS more important:
0 -
KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 4 ☆ 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?0 -
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.0
-
KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 4 ☆ 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,
Kai1
So You Wanna Be An eLearning ROCKSTAR?
Categories
- 4.4K All Categories
- 35 ✫ Announcements
- 5 ✪ Contests
- 33.6K eLearning Brothers® Products
- 33.2K Lectora®
- 31.3K Lectora Discussions
- 1.9K Lectora Feature Requests
- 56 Lectora User Groups
- 2 AssetLibrary™
- AssetLibrary Discussions
- 2 AssetLibrary Feature Requests
- 221 CenarioVR®
- 122 CenarioVR Discussions
- 99 CenarioVR Feature Requests
- 2 Rockstar Learning Platform®
- 1 Rockstar Learning Platform Discussions
- 1 Rockstar Learning Platform Feature Requests
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- 108 CourseMill®
- 101 CourseMill Discussions
- 40 ReviewLink®
- 28 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 1 The Training Arcade®
- 1 The Training Arcade Discussions
- The Training Arcade Feature Requests
- 7 Additional Learning Products
- 2 Adobe®
- 2 Articulate®
- 1 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 892 All Things eLearning
- 3 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 5 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 544 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 2 Visual Design
- 323 Web Accessibility
- 1.2K ♪ The Green Room
- 3 ♡ Community Feedback
- 7 Community Tips