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

或者您可以将#contentdiv 放在另一个 div 中：

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

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);
}