![]() |
#1 |
Banned
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 168
Karma: 10010
Join Date: Oct 2018
Device: Tolino/PRS 650/Tablet
|
centered text having a specific width
Hi,
i cant get a centered text having a specific width. Simple Example: Code:
<?xml version="1.0" encoding="utf-8"?> <!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> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head> <body> <p class="test">Test test test</p> </body> </html> Code:
p.test { text-align: center; border-bottom: 1px solid black; width:10em; } I tried with divs but wanst succesful. Any idea? And of course i need this worklng in ADE and RMSDK ![]() Vroni |
![]() |
![]() |
![]() |
#2 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,212
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
You could try something like:
Code:
p.test { border-bottom: 1px solid black; text-align: center; width: 40%; margin: 0 30%; I don't know whether this is the *best* way but it could be *a* way. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,783
Karma: 134321338
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
You have to use a % for the width as screens vary of different widths. So using em just will not work
|
![]() |
![]() |
![]() |
#4 |
Banned
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 168
Karma: 10010
Join Date: Oct 2018
Device: Tolino/PRS 650/Tablet
|
Hi thanks so far but i would like to have the length of the line related to the text, not to the screen width.
|
![]() |
![]() |
![]() |
#5 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,670
Karma: 86234809
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
"text-align" centers the text within the paragraph. It does not center the paragraph on the page. To do that use "margin-left: auto; margin-right: auto".
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Banned
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 168
Karma: 10010
Join Date: Oct 2018
Device: Tolino/PRS 650/Tablet
|
Unfortunately, margin auto can be ignored by epub specs and this is what ADE/RMSDK is exactly doing.
|
![]() |
![]() |
![]() |
#7 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,670
Karma: 86234809
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
|
![]() |
![]() |
![]() |
#8 |
Banned
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 168
Karma: 10010
Join Date: Oct 2018
Device: Tolino/PRS 650/Tablet
|
Margins are taking the screenwidth into aspect, which i dont want. I would like to adjust the length of the line in respect to the text.
|
![]() |
![]() |
![]() |
#9 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,670
Karma: 86234809
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
|
![]() |
![]() |
![]() |
#10 | |
Bookmaker & Cat Slave
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 11,473
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
![]() |
![]() |
![]() |
#11 |
Addict
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 206
Karma: 547516
Join Date: Mar 2008
Location: Berlin, Germany
Device: KObo Clara, Kobo Aura, PRS-T1, PB602, CyBook Gen3
|
I tried the following and it does what you want in a browser.
Code:
<?xml version="1.0" encoding="utf-8"?> <!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> p.test { text-align: center; } span.test { padding: 0 1px; border-bottom: 1px solid black; } </style> </head> <body> <p class="test"><span class="test">Test test test</span></p> </body> </html> ![]() |
![]() |
![]() |
![]() |
#12 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
Quote:
Code:
<?xml version="1.0" encoding="utf-8"?> <!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> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="center"> <p class="test">Test test test</p> </div> </body> </html> Code:
div.center { text-align: center; } p.test { display: inline-block; text-align: center; border-bottom: 1px solid black; width:10em; } |
|
![]() |
![]() |
![]() |
#13 | |
Bookmaker & Cat Slave
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 11,473
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
![]() |
![]() |
![]() |
#14 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
|
![]() |
![]() |
![]() |
#15 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
If you don't actually want a specific width, just a border that is the same width as the text, with these additions in red it worked in ADE 1.7.2, Kobo RMSDK10, and Calibre 2.85:
(Edit: I've added a break in the paragraph to show the difference between this and Sunlite's solution, which is what happens when the paragraph has more than one line: this solution has a border under the whole paragraph, Sunline's has a border under each line.) Code:
<?xml version="1.0" encoding="utf-8"?> <!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> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="center"> <p class="test">Test test<br/>test</p> </div> </body> </html> Code:
div.center { text-align: center; } p.test { display: inline-block; text-align: center; border-bottom: 1px solid black; /*width:10em;*/ } Last edited by GeoffR; 08-02-2019 at 05:54 PM. |
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Strange, specific bug rendering centered text w/ p class command in Nook touch | ljcblue | ePub | 2 | 05-23-2014 12:43 PM |
Conversion ePub -> azw3, text centered | apeiron75 | Calibre | 0 | 05-18-2013 12:28 PM |
Calibre screwing up centered-text b/c of forced tabs | lurker316 | Calibre | 0 | 12-21-2010 09:36 PM |
.epub hyperlinks, centered and non indented text. | Xabache | ePub | 2 | 09-13-2010 01:11 PM |
Centered and right aligned text for Stanza on iPhone | Arjen | ePub | 6 | 06-17-2010 12:19 PM |