How do I vertically center my presentation?

Question

Cant seem to find a way to vertically center my presentation with desktop scaling best fit turned on. Its stuck at the top and when I do full screen its also stuck at the top.

Answer 1

I responded via email, but I'm posting my reply here in case it can help someone else with the same question:

The Desktop Scaling with Best Fit settings are what I would usually recommend (in the Advanced section of the Export HTML5 with in5 dialog, Mobile Device Viewport Zoom would be set to Use Desktop Scaling and Desktop Scaling to Best Fit). Desktop Scaling with Best Fit fills the browser window as much as possible while still maintaining the layout. However, when your presentation is scaled down enough, it will align to the top of the browser. 

You could try other Desktop Scaling options such as Fill Width or Fill Height. Here's more information on various options for flexible layouts:

• How to Create Responsive Layouts

The vertical alignment to the top of the browser window when its scaled down happens when the output is in the Slider (Horizontal) format instead of a Flipbook. As of in5 version 3.7, flipbooks by default are vertically centered even when the browser window is scaled down. 

You can take advantage of the flipbook's vertical centering and make it perform much like a slider document by using the following instructions:

1. Open the export dialog by going to in5 > Export HTML5 with in5...

2. In the Basic section of the export dialog, set the Page Format to Flipbook with Page Peel.

3. In the Resources section of the export dialog in the JS portion, add the following code to force the Flipbook into single page mode:

   • getOrientation = function(){ return 'portrait'; };

4. In the Advanced section of the export dialog, set Mobile Device Viewport Zoom to Use Desktop Scaling and Desktop Scaling to Best Fit.

5. Click OK to export

6. Open assets/js/turn.min.js and make the following changes: 

   • (If you're an Adobe Creative Cloud all apps subscriber, then you have access to Dreamweaver where you can edit it and see the changes. If you open the exported index.html file in Dreamweaver, then all the associated files will open. Click on turn.min.js at the top to open it. You can use Command (macOS) / Ctrl (Windows) + F to search for cornerSize:75 and change it in the file. Then search for duration:600 and change it too. You can also make the edit in a text editor such as TextEdit (macOS) or Notepad (Windows)):

     • Change cornerSize:75 to cornerSize:0 to remove the corner peel. 

     • Change the two instances of duration:600 to duration:0 to remove the page animation.

Comments

Would be very useful and welcome if Slider (horizontal) would behave just like Flipbook regarding the vertical alignment when the presentation is scaled down.

The presentation aligned to the top of the browser when scaled down looks wrong.

---

I'll pass your feature request along to Justin.

In the meantime, you can use the process described above to make the flipbook appear like the slider so that you can take advantage of it being vertically centered.