Centering a contect box

brandofamily

What's the best/ easiest way to center a content box on a page where you do not want the box to fill the width of the page? I currently use empty content boxes (with and empty div) on either side of the "filled" content box. There has to be a better way.

Hikin' Mike

A few ways...

'width: 0 auto;'

'width: 0 20%;' - this will give you a margin left/right 40% of the total width.

'text-align: center;'

Do you have a specific aplication?

Bea

Hi Anthony,

Could you please send us a link to the page where you have those content blocks, via email: http://help.smugmug.com/customer/portal/emails/new ? We'll be happy to have a look and help you further.

We're standing by,

ChancyRat

brandofamily wrote: »

What's the best/ easiest way to center a content box on a page where you do not want the box to fill the width of the page? I currently use empty content boxes (with and empty div) on either side of the "filled" content box. There has to be a better way.

There is a spacer content block for making empty space. (Design section? - sorry, don't have SM open at the moment.)
Then you can set the container width of each of them (one on each side), to force the material where you want it.

Probably other solutions as well...

brandofamily

Hikin' Mike wrote: »

A few ways...

'width: 0 auto;'

'width: 0 20%;' - this will give you a margin left/right 40% of the total width.

'text-align: center;'

Do you have a specific aplication?

This homepage (I maintain the site for the owner) has several empty div html content boxes to center the visible blocks.
http://www.onbroadwaydancers.com/

brandofamily

Hikin' Mike wrote: »

A few ways...

'width: 0 auto;'

'width: 0 20%;' - this will give you a margin left/right 40% of the total width.

'text-align: center;'

Do you have a specific aplication?

Where would I put this code?

Hikin' Mike

Use ONE HTML/CSS box. Delete the other. Add this to your HTML box:

[html]
<div id="center-container">

<div class="center-box">
<p>Text goes here</p>
</div>

<div class="center-box">
<p>Text goes here</p>
</div>

</div>
[/html]

Add this to the CSS:

#center-container {
    padding: 5%;
    background: #ccc;
    }

.center-box {
    margin: 20px;
    padding: 5%;
    border: 2px solid #fff;
    background: #999;
    }

Obviously you need to edit your .center-box colors. This way both boxes will have the same size and color/border properties.

Darter02

Cool beans. Just commenting so I can find this thread when I need to use this information.

zubenelgenubi

Thanks Mike,

The "margin" property did the trick for me. Here's an example, from the "404" page for my site:

http://zubenelgenubi.smugmug.com/404

I used the normal smugmug customizer to set the overall width of the text box to 100%. Then I used the following CSS code to set the margins to 25% on each side (and 5% top and bottom.)

.sm-page-widget-text {
background-color: rgba(45, 45, 45, 0.60);
padding: 5px;
border-radius:10px;
border: 1px solid black;
box-shadow: -8px 8px 12px black;
overflow:hidden;
text-align: left;
margin: 5% 25% 5% 25%;
}

This produced exactly what I want: a centered text box that is only 50% of the width of the current browser window. It stays centered but automatically adjusts it's width as I resize my browser window. Perfect!

Thanks,

- Mark

Hikin' Mike wrote: »

Use ONE HTML/CSS box. Delete the other. Add this to your HTML box:

[html]
<div id="center-container">

<div class="center-box">
<p>Text goes here</p>
</div>

<div class="center-box">
<p>Text goes here</p>
</div>

</div>
[/html]Add this to the CSS:

#center-container {
    padding: 5%;
    background: #ccc;
    }

.center-box {
    margin: 20px;
    padding: 5%;
    border: 2px solid #fff;
    background: #999;
    }

Obviously you need to edit your .center-box colors. This way both boxes will have the same size and color/border properties.