View Single Post
Old 08-26-2025, 12:13 AM   #8
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,363
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by ElMiko View Post
Thanks, guys.

couple of clarifying questions:

@Turtle91: When I first reproduced the code, this is what I got:
Attachment 217705

With a little poking, I figured out that it was the container width that was causing the 2nd line to break, which i changed to 60%. However, no matter how you slice it, the text isn't actually automatically centering in the page. So for example, if i expand the window (keeping your original 50vw) you'll see:

Attachment 217706

Is having to set the viewport width relative to the physical width of the viewing window just an unavoidable feature of this solution, or is there a way to make it automatically center for any length of text?
Setting the width of the containing div allows the margin:xx auto to evenly divide what is left into the left/right margin. The main issue is that you have the inner div left-aligned... which means that the larger the width of your window, the more space you will get on the right side.

Try adding a border (border:1px solid red; or green) to each of the divs as you play with the widths to help visualize what it is doing.
Click image for larger version

Name:	Screenshot 2025-08-26 000041.png
Views:	18
Size:	188.1 KB
ID:	217714

Click image for larger version

Name:	Screenshot 2025-08-26 000014.png
Views:	22
Size:	167.3 KB
ID:	217715

Your other option is to use a flex box (if ePub3), or a table (ugh), or just center each of the parts...it doesn't have to be exactly like the print version.

Click image for larger version

Name:	Screenshot 2025-08-26 001757.png
Views:	22
Size:	159.5 KB
ID:	217717

Click image for larger version

Name:	Screenshot 2025-08-26 002018.png
Views:	20
Size:	153.8 KB
ID:	217718

Last edited by Turtle91; 08-26-2025 at 12:21 AM.
Turtle91 is offline   Reply With Quote