Center a container

[carlbsmith]

I have a really basic question. If I create a UX component, and put a container in it with a sub-type of "none", the container is not centered by default. For example, let's say you make the container have a width of 90% and make the background color red so you can see it. It is left aligned. How do you center it? I know this is a simple question, but I do not see a simple answer. There is a container alignment attribute which aligns the contents of the container, but not the container itself. I could put the container inside of another container, but that just seems silly, and creates more padding or margin than I want. Any ideas?

[lauraRedway]

Re: Center a container

Hi,

Have you tried switching the container alignment property? It is 'Left' by default but can be changed to 'Center'

[carlbsmith]

Re: Center a container

Yes, but like I said, that aligns the content of the container, not the container itself. The description of that attribute even states that it is to align the content, not the container. My question is, how do you align the actual container?

[Steve Workings]

Re: Center a container

One way is with 2 containers.

The outermost container is set for a width of 100%, and alignment centered.
Then the inner container can be/do whatever you want, but it'll still be centered.

[carlbsmith]

Re: Center a container

If I use the two containers, how do I get rid of the extra spacing? It's like there is some extra margin/padding on the left/right side.

[iRadiate]

Re: Center a container

I just tried Steve's suggestion with 2 containers and it works for me. I am not seeing any extra padding.
See attached example.

Actually, disregard the above .. I am seeing the same problem now!

[iRadiate]

Re: Center a container

So, it seems to work if you set the width of the inner container to a specific pixel width but not if you user percent ...

Containers.png

[jgrannis]

Re: Center a container

I tried it with just one container.
Kept the container alignment as 'left'. The container width as '90%'.
And then this as the container style: background-color: #ff0000; margin-left: 5%; margin-right: 5%;

[carlbsmith]

Re: Center a container

Thanks for the feedback. That has given me a couple of options.

[GGandhi]

Re: Center a container

you can do this in the container definition itself,
width 90%
spacing - left 5%
(you don't need spacing-right, same thing in css too you don't need margin-right if you set the half of the balance of the width to the left side)

[jgrannis]

Re: Center a container

Not sure it is ever a good idea to leave the rendering engine to guess what it should do with the undeclared remaining 5%. Some engines may hold up drawing the whole "page" until it makes sure that the remaining 5% wasn't declared somewhere else. For a very fast loading page, the user probably wouldn't notice. For a slow loading page, depending on where that element is placed, the user could see a blank white page for a number of seconds and have the impression that the app is slow. I always like to do the opposite and try to get the browser to start rendering elements as fast as possible even if the app (or web/app server) still has some work to do to finish completely building the page. At least that gives the impression that the app is faster than it really is.

[Michael1954]

Re: Center a container

We use Steve's method a lot in complex situations but if all you want is that I concur with Gandhi and Jeff

background-color: red;
margin-left: 5%;

[Davidk]

Re: Center a container

Just curious... why do you need to do this? Also, would the Alignment Container be of use?

[Steve Wood]

Re: Center a container

Another solution, although harder to set up initially, is to adopt a "grid system" such as the one that comes with Twitter Bootstrap. A more simple one is at 996grid.

Using a grid system, you would use divs to logically divide your "row" in to columns. For your issue, divided the row in to three columns, then place your component in the middle column.

Might look like this:

<div class="container">
<div class="row">
<div class="col-md-4">
'content here
</div>
<div class="col-md-4">
'component here
</div>
<div class="col-md-4">
'content here
</div>
</div>
</div>

[GGandhi]

Re: Center a container

Not sure it is ever a good idea to leave the rendering engine to guess what it should do with the undeclared remaining 5%. Some engines may hold up drawing the whole "page" until it makes sure that the remaining 5% wasn't declared somewhere else.

i am not an expert in css by any means, for that matter alpha or web pages too. all of them i have taught myself by reading books and this message board.
as far as i know, every engine holds up the delivery of the page till all is calculated.
it is my understanding that dom is fed into the browser at the same time css object model(cssom) also loaded and the browser is aware of both of them. then the browser builds a rendering tree from the dom tree using the css tree. while dom may have elements seen and unseen the rendering tree only has the visible nodes.
then the browser "paints" the page from the "flow". if there is anything browser does not understand it simply ignores it. only when the dom element is changed the browser needs to "reflow and repaint" if simply an addition the all it does is "repaints".
i tested the component with left side and right side declaration in css or in the control definition or just on one side, the performance showed 4 millisecond difference in displaying the page. if you look at the display the container is displayed on a single shot and no adjustment noted in the later segments.
one could argue 4 millisecond is 4 milliseconds and it could "bloat" the dom etc.,
yes of course then you have a point. i agree.
last but not the least when you declare in percentages the calculation is already done by you making the browser just to acknowledge the math.
as i said i am not an expert, this is my opinion, however flawed it may be.