css - CSS: div 内の要素を水平方向に配置する

Question

<div id='content'>要素 ( ) を div ( ) 内で<div id='container'>水平方向に揃えようとしています。

contentコンテナの幅より狭くても広くてもかまいません。常に中央に配置する必要があります。

CSS3を使用してどのようにそれを行いますか?

jsFiddle を参照してください: http://jsfiddle.net/ja26Z/

Answer 1

あなたは基本的にそれを持っていました、ただのスペルミスです。CSS をアメリカのスペルに更新し、text-align:center;

更新されたフィドルhttp://jsfiddle.net/ja26Z/3/

Answer 2

これはどうですか: 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);
}