How do I centralize the box?

StevenLin · 03-12-2012, 10:37 PM

I want to put the colored box in the center, but I've tried several css that don't seem to work. How do I put it in the central position instead of in the current left position?

theducks · 03-12-2012, 11:46 PM

Quote:

Originally Posted by StevenLin

I want to put the colored box in the center, but I've tried several css that don't seem to work. How do I put it in the central position instead of in the current left position?

I would use the margin-left: <value>
to fake centering , care needs to be taken that the box will always fit the display width (ADE has issues with auto margins, so be forewarned)

Toxaris · 03-13-2012, 01:18 AM

You might try a table. It is not nice, but it will probably work.

huebi · 03-13-2012, 03:15 AM

May i ask what this have to do with Sigil? Thats HTML or ePub where we have a special forum for.

theducks · 03-13-2012, 09:37 AM

Quote:

Originally Posted by huebi

May i ask what this have to do with Sigil? Thats HTML or ePub where we have a special forum for.

You are probably correct. If the question was 'How can I make Sigil do this (without resorting to CV ), it would be a Sigil question.

mmat1 · 03-13-2012, 02:42 PM

Quote:

Originally Posted by StevenLin

I want to put the colored box in the center, but I've tried several css that don't seem to work. How do I put it in the central position instead of in the current left position?

I guess your box should alway stay at the same size and should always be perfectly centered.

IMO it's not possible to find a solution with paragraph or table formatting which is perfect everywhere.

Table-fomatting:

Code:

table    { margin: 1em auto }
td { border: 1px solid black; text-align: center; width: 200px }

works quite well at most (but not all) devices.

With paragraph-formatting it will be a bit difficult to keep the box at the same size, if the screen size changes.

So i got a third suggestion: make a image.

Perkin · 03-13-2012, 03:04 PM

Quote:

Originally Posted by theducks

I would use the margin-left: <value>
to fake centering , care needs to be taken that the box will always fit the display width (ADE has issues with auto margins, so be forewarned)

If the box can be defined width as a % of display width, then the left margin coluld be 100%-BoxWidth% divided by 2, so if BoxWidth=70% then left margin would be 15%

crutledge · 03-13-2012, 03:21 PM

Quote:

Originally Posted by StevenLin

I want to put the colored box in the center, but I've tried several css that don't seem to work. How do I put it in the central position instead of in the current left position?

i think that this may be what you are looking for.

Code:

.centerbox{
width:50%;
padding:10px;
border:3px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
}

<div class="centerbox">. . . . </div>

You can adjust as needed.

theducks · 03-13-2012, 03:50 PM

Quote:

Originally Posted by crutledge

i think that this may be what you are looking for.

Code:

.centerbox{
width:50%;
padding:10px;
border:3px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
}

<div class="centerbox">. . . . </div>

You can adjust as needed.

ADE does not do (it ignores) 'Auto'
Use the formula above

HarryT · 03-13-2012, 05:09 PM

This will probably have the HTML purists beating their heads against the wall in horror, but the "depracated-but-still-supported-by-all-devices" <center> tag is jolly useful for this kind of thing.

mmat1 · 03-13-2012, 05:39 PM

Quote:

Originally Posted by HarryT

This will probably have the HTML purists beating their heads against the wall in horror, but the "depracated-but-still-supported-by-all-devices" <center> tag is jolly useful for this kind of thing.

You're right, but luckily i got a helmet ;-)

Sigil transforms the "<center>" to an "sgc-1 {text-align: center}" without hesitation.

"<center>" ist html-transitional only, so i won't assume, that it will be supportet by all devices.

StevenLin · 03-13-2012, 09:57 PM

Quote:

Originally Posted by mmat1

You're right, but luckily i got a helmet ;-)

Sigil transforms the "<center>" to an "sgc-1 {text-align: center}" without hesitation.

"<center>" ist html-transitional only, so i won't assume, that it will be supportet by all devices.

WOW!!!

There are so many replies!!! A great thank to all of you. I will give it a try on the suggestions all of you have put here.

Thanks to you all!

msmith65 · 08-14-2012, 04:47 PM

This was a huge help to me today. Karma all around; thank you.

03-12-2012, 10:37 PM	#1
StevenLin Member Posts: 10 Karma: 10 Join Date: Jan 2011 Device: none	How do I centralize the box? I want to put the colored box in the center, but I've tried several css that don't seem to work. How do I put it in the central position instead of in the current left position? Attached Thumbnails

03-13-2012, 01:18 AM	#3
Toxaris Wizard Posts: 2,102 Karma: 927511 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-300, PRS-T1	You might try a table. It is not nice, but it will probably work. __________________ Creator and maintainer of the e-Book Tools Word add-in. Creator and maintainer of the Clean HTML macro for MS Word.

03-13-2012, 05:09 PM	#10
HarryT eBook Enthusiast Posts: 54,660 Karma: 26165759 Join Date: Nov 2006 Location: UK Device: Kindle Touch, PW, Fire HD, iPad 3, iPhone 4, Samsung Tab 2 7 + More	This will probably have the HTML purists beating their heads against the wall in horror, but the "depracated-but-still-supported-by-all-devices" <center> tag is jolly useful for this kind of thing. __________________ Harry Currently proofreading The Poison Belt, by Sir Arthur Conan Doyle.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Text in a box?	Skeezix	Mobi	3	01-23-2012 07:22 AM
Thinking 'outside the box'...new uses...	Reader Paradice	Kobo Tablets	20	12-01-2011 06:42 PM
$119.99 PE New in Box	Emptora	enTourage eDGe	4	08-17-2011 02:14 PM
Sell Smart Q7, w/ box etc.	rogue_ronin	Flea Market	0	12-17-2009 06:46 PM
Kindle out of the box	aconfrere	Introduce Yourself	3	01-18-2008 07:02 PM

03-13-2012, 03:15 AM	#4
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	May i ask what this have to do with Sigil? Thats HTML or ePub where we have a special forum for.

08-14-2012, 04:47 PM	#13
msmith65 Enthusiast Posts: 31 Karma: 10 Join Date: Aug 2012 Device: Kindle	This was a huge help to me today. Karma all around; thank you.


Advertisement Enthusiast