CSS: Горизонтальный Качающаяся элемент внутри DIV

Question

я пытаюсь горизонтально выровнять элемент (<div id='content'>) в пределах DIV (<div id='container'>)

content может быть уже или шире, чем ширина контейнера. Мне нужно, чтобы это было всегда центрировано.

Как вы это используете с помощью CSS3?

Смотрите jsFiddle: http://jsfiddle.net/ja26Z/

Answer 1

Или вы можете разместить #content DIV в другой DIV:

http://jsfiddle.net/ja26Z/6/

Answer 2

вы в основном было это, просто орфографическую ошибку. Обновление CSS для американской орфографии, text-align:center;

обновленный скрипку http://jsfiddle.net/ja26Z/3/

Answer 3

Как об этом: http://jsfiddle.net/wVGrN/3/

#content всегда будет выровнен по центру #container даже когда он шире, чем контейнер.

HTML

<div id='container'> 
    <div id='content'></div> 
</div> 

CSS

#container { 
    position: relative; top: 10px; left: 100px; width: 100px; height: 100px; border: 3px solid #666; 
    text-align: center; 
} 
#content { 
    display: inline-block; 
    height: 94px; 
    border: 3px solid #99ccff; 
    margin: 0 auto; 
    position: absolute; 
    left: 50%; 
} 

Тестирование сценария

/* This script here is only to demonstrate content with various width, it won't be used in production */ 
$(function(){ 
    ResizeContent(); 
}); 
function ResizeContent(){ 
    var width = Math.floor((Math.random()*150)+20); 
    var marginLeft = -width/2; 
    var borderWidth = 3; 
    $('#content').width(width); 
    $('#content').css('margin-left', marginLeft-borderWidth); 
    setTimeout(ResizeContent, 1000); 
}