![]() |
#1 |
Member
![]() Posts: 11
Karma: 10
Join Date: May 2024
Device: none
|
css for horizontal and vertically centred
Hi, Im new to Sigil and the book author would like quotes that come before a chapter to be centred and standalone (in their own file/page)
I'm having trouble getting the css to work for this, other than just 50% of the page. Any help you can offer gratefully received ![]() |
![]() |
![]() |
![]() |
#2 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,149
Karma: 18843349
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
|
Hi Lucie - welcome to MR!
The easiest way to make sure it is on it's own page is to put it in its own html file. Each chapter should be in a separate file and you can just place the quote file before the chapter file. Are you using ePub2 or ePub3?? There are different techniques for the different versions. For ePub2, I borrow some <table> properties without having to use a table. It works great on my devices but I can't guarantee all devices support <table>s, although, it would be a pretty poor device/app that didn't... What device/app are you targeting for your book? In my case (ePub2) I surround whatever I want to be vertically centered with a double <div>. You can style the interior paragraphs however you like... ie. horizontally centered. You can see a better explanation on W3Schools website. They are a pretty decent resource for coding specifics. Code:
CSS: /* Vertically centered on page */ div.v-ctr {height:100%; width:100%; display:table; position:fixed; padding:0; margin:0; text-indent:0} div.v-ctr div {display:table-cell; vertical-align:middle; padding:0; margin:0} HTML: <body> <div class="v-ctr"> <div> <p>yadda yadda yadda</p> </div> </div> </body> Cheers! Last edited by Turtle91; 05-09-2024 at 09:12 AM. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,149
Karma: 18843349
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
|
In Sigil I have set up a 'clip' to place the surrounding <div>s...so all I have to do is highlight whatever section I want vertically centered...then click on the clip. For more info, take a look in the "Clips" section of the Sigil Users Guide.
Code:
Clip:
Name: Text:
V-Ctr <div class="v-ctr">\n<div>\n\1\n</div>\n</div>
|
![]() |
![]() |
![]() |
#4 |
Connoisseur
![]() Posts: 61
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
|
|
![]() |
![]() |
![]() |
#5 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,149
Karma: 18843349
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
|
I just used a basic text-align:center
Code:
.ctr {text-align:center} |
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
Connoisseur
![]() Posts: 61
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
|
Quote:
I have found another way that does work: Code:
html, body { height:100%; margin:0; } /* required */ div.centerVpag { display:table; height:100%; width:100%; text-indent:0; text-align:center; } .centerVrow { display:table-row; } .centerVcell { display:table-cell; vertical-align:middle; text-align:center; text-indent:0; } <div class="centerVpag"> <div class="centerVrow"> <p class="centerVcell">TEXT CENTERED VERTICALLY AND HORIZONTALLY</p> </div> </div> html, body { height:100%; margin:0; } Which I don't like having to apply to the whole epub just to make a little vertically centered text look good. |
|
![]() |
![]() |
![]() |
#7 |
Junior Member
![]() Posts: 3
Karma: 10
Join Date: May 2024
Device: none
|
Create CSS File: Make a CSS file named quotes.css.
Define Styles: In quotes.css, style quotes with: css Copy code blockquote { text-align: center; } blockquote p { font-style: italic; font-size: 1.2em; } Link CSS: Add quotes.css to your Sigil document via "Tools" > "Add Semantics" > "External CSS". Insert Quotes: Use <blockquote> HTML tag for quotes. Export: Quotes should now appear centered and standalone on their own page when you export your Sigil document. |
![]() |
![]() |
![]() |
#8 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,149
Karma: 18843349
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:
For horizontal centering, the techniques are the same as any other text. You need to make sure you have nothing else adjusting the letters to the right… such as text-indent or maybe a margin/padding. That is why I included: margin:0; padding:0; text-indent:0; Another, less common, culprit is letter-spacing; that places extra spacing to the left of each letter, including the first. Definitely do NOT try to use this in the same html file as other, non-centered, text. It will float over the top of the other text. Make sure it is in its own html file. Edit: Sorry I didn't show the CSS in the image attachment above. Here it is. Also... Make sure you are not applying other css to the file...either check with Sigil's built-in css inspector in the Preview Window to see if something else is being applied to your page - OR - just don't link a css sheet and place the css in the <style> section of the header...as shown in attached image. Another culprit to check is if the Kobo Libra is adding a text-indent because of user settings in the Kobo itself?? If this is the case, you may want to add !important after the text-indent. Not sure it will work if Kobo is forcing it's own settings over the css??? ![]() text-indent:0 !important Last edited by Turtle91; 05-12-2024 at 10:58 AM. |
|
![]() |
![]() |
![]() |
#9 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,238
Karma: 57979022
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Centering works fin on a Libra2.
You just need to also define anything else you do not wish it inherit. Code:
text-align: center; text-indent: 0; As you noted, it looks real crappy next to a true center ![]() Last edited by theducks; 05-12-2024 at 10:58 AM. Reason: double word fixed |
![]() |
![]() |
![]() |
#10 | |
Connoisseur
![]() Posts: 61
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
|
Quote:
In general it does, but in this particular case you can see that it doesn't. In summary, everything seems to work in Sigil's viewer and in Calibre's epub viewer. The problem is that on the Kobo Libra 2 this vertical alignment does not work at all in epub format (the text is stuck to the top edge of the screen), although it does work partially in kepub format: the vertical alignment is correct, but the horizontal alignment is somewhat shifted to the right. This is the complete code I used. In Sigil it looks fine, but not in Kobo Libra 2 (converted to kepub with Calibre): Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> div.v-ctr { display:table; height:100%; width:100%; position:fixed; padding:0; margin:0; text-indent:0 !important; } div.v-ctr div { display:table-cell; vertical-align:middle; padding:0; margin:0; text-indent:0 !important; } .ctr { text-align:center !important; } </style> </head> <body> <div class="v-ctr"> <div> <p>VERTICALLY CENTERED</p> <p class="ctr">HORIZONTALLY CENTERED</p> </div> </div> </body> </html> |
|
![]() |
![]() |
![]() |
#11 |
Connoisseur
![]() Posts: 61
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
|
I have just solved the riddle. It's all because I have a margin selected in the menu called “Aa”. If I select margins = 0 the centering is perfect.
However, this is a Kobo defect, because it's legitimate to adjust this menu to the user's taste, and it shouldn't cause any problems, as it doesn't affect the centering of any other text. |
![]() |
![]() |
![]() |
#12 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,238
Karma: 57979022
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
![]() And each brand behaves differently At least my 2 Kobo's behave the same |
![]() |
![]() |
![]() |
#13 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,562
Karma: 134254544
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
![]() |
#14 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,149
Karma: 18843349
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:
You could try using the !important property and/or enable Use Publisher's Styles, as theDucks mentioned, if it is available for your device. I was playing around with this and you could try the following: If you use vh/vw instead of % in the height/width properties, then you don't need the position:fixed. However, I'm not sure how many devices support vh/vw ??? Last edited by Turtle91; 05-12-2024 at 11:07 PM. |
|
![]() |
![]() |
![]() |
#15 |
Connoisseur
![]() Posts: 61
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
|
The same occurs with 100vh/100vw.
The problem comes from the side margin setting in the Aa menu of the ereader. I like to have a white margin of about 1 cm on each side, and that setting messes up the centering with this trick. Fortunately this margin setting does not cause any problems with the centering of other text, tables, images, etc. that I have used so far. It seems that Kobo has not taken into account this trick from Turtle91. Surely Kobo won't fix it, like so many other things. |
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Centred and scaled image not centred or scaled | AlanHK | Kindle Formats | 12 | 08-05-2020 12:35 PM |
correct interpretation of <br> with centred text | cybmole | Sigil | 23 | 08-16-2014 10:55 AM |
Authors vertically | jfbok | Library Management | 4 | 05-30-2012 12:31 PM |
Can you center vertically? | bfollowell | ePub | 10 | 07-07-2011 03:19 AM |
last line in each paragraph centred | scgf | Calibre | 9 | 09-10-2008 02:23 PM |