How do I centralize the box?

[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?

[theducks]

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]

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

[huebi]

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

[theducks]

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]

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:

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]

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]

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.

.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]

Originally Posted by crutledge

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

.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]

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]

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]

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]

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