Horizontal alignment of unknown div width

Question

I would like to align div inside parent div to center horizontally for div with unknown width and dynamic content (will wary from use case to use case.

I have read that margin: auto; usually is usually solution here, but it requires set of width which is unknown for me compile-time. text-align: center does't work for div inside parent div.

Fiddle example

Here is a Fiddle example.

My two questions

I would like the three circles to be aligned to the middle. Number of circles can vary from zero to many.
Another related questions is how I can make the progress bar have a minimum width (for instance when having only one, two or three steps) and strech to right and left when adding more steps? Here is (very bad) illustration in Paint.

enter image description here

As a note I would like this to work for IE 8 as well.

Take a look at his example, is this what you want http://jsfiddle.net/vAG9g/4/ ? — W.D., Apr 20 '14 at 19:45
Thats correct, @user3529729. But I can't see in the Fiddle example that this is solved. — Ismar Slomic, Apr 20 '14 at 19:48

score 5 · Accepted Answer · answered Apr 20 '14 at 19:33

5

Do you want something like this? DEMO

.progressbar{
    top: 0; 
    position: fixed; 
    background-color: #00bbee; 
    width: 100%; 
    height: 45px; 
    left: 0;
    text-align:center // added this line for centering the content   
}

.steps {
    display: inline-block; // and this line for auto-aligning center your child elements
}

answered Apr 20 '14 at 19:33

W.D.

1,033
1
7
12

This seems like solving my question #1! I have tried so many alternatives so I might misunderstood that text-align: center couldn't be a part of the solution. Do you have any tip on question #2? Thanks! – Ismar Slomic Apr 20 '14 at 19:39
Note that this won't work in IE8 without proper `DOCTYPE` and on lower version without some workarounds (if you care about that) – Yaron U. Apr 20 '14 at 19:40
Actually, I'm trying to understand what you mean by your second question. Can you rephrase it? – W.D. Apr 20 '14 at 19:41
I have tried to detail my question. Please see if this helps. – Ismar Slomic Apr 20 '14 at 19:44
I just came across on following thread that actually tries to crate step progress bar with pure html and css, which is very similar to what I'm trying to achieve here. http://stackoverflow.com/questions/5213753/build-step-progress-bar-css-and-jquery – Ismar Slomic Apr 20 '14 at 19:46

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

Your first question can be solved by applying text-align: center to the top wrapper and changing the display of the steps wrapper to inline-block

Regarding the second question, I'm not sure that this is exactly what you meant - but it can be solved by moving the line out of the steps wrapper and positioning it at the vertical center of the whole bar using

position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;

Example in this fiddle

note that I also changed your html because there was some unnecessary tags there

For IE8 support check out this question (the only problematic issue here is the use of inline-block

edited May 23 '17 at 12:34

Community

1
1

answered Apr 20 '14 at 19:49

Yaron U.

7,681
3
31
45

Thanks, but for question 2 it's not exactly what I was searching for. Please see my updated explanation with illustration. – Ismar Slomic Apr 20 '14 at 20:00
in this case you will have to manually handle the situation (I don't see any clear rules regarding the spread of the circle - for example - 2 and 3 fill the exact same space) – Yaron U. Apr 20 '14 at 20:02

Horizontal alignment of unknown div width

2 Answers2