div центрирование

Question

[Anton Filippov]

Как выровнять bar посередине foo

<div id="foo">
    <div id="bar">
        lalala
    </div>   
</div>

#foo {
    border: 1px solid grey;
    width: 500px;
}

#bar {
    border: 1px solid yellow;
    background-color: #ff0000;
    margin: 0 auto;
    display: inline-block;
}

Фидл

Answer 1

[Юрий Лобанов]

#foo {
    border: 1px solid grey;
    width: 500px;
    text-align: center;
}

Comments

[Anton Filippov]

не, не мне не текст нужно центрировать, а сам див. а ширина дива зависит от содержимого

[Steely]

jsfiddle.net/sFKkA/1

[Anton Filippov]

спасибо! не думал, что текст-алигн влияет на дивы и изображения :3

[Иван Желудков]

@vicodin он влияет на текст и изображения внутри дива, если вы зададите фон блоку, он будет как будет без text-align.
А выравнивается вот так:
width: x;
margin-left: 50%-x;

[Иван Желудков]

Ой ошибся. в margin-left: 50%-x/2

[Иван Желудков]

Хотя я кажется ошибаюсь, ведь в примере на jsfiddle работает, видимо не работает в более сложных ситуациях, так как у меня такое когда-то не работало.

[Anton Filippov]

@webvany ну мне нужно было счетчики выровнять, задача выполнена)

Answer 2

[Дмитрий Дерепко]

добавьте в #bar допустим, ширину 300пикселей
width:300px;

Comments

[Anton Filippov]

так получается) а без указания ширины никак?