Question

我想在div（<div id='content'>）

中水平对齐元素（<div id='container'>）

content可能比容器的宽度更窄或更宽。我需要它始终居中。

你是如何使用CSS3做的？

请参阅jsFiddle：http://jsfiddle.net/ja26Z/

Answer 1

你基本上有它，只是一个拼写错误。将您的CSS更新为美国拼写text-align:center;

更新了小提琴http://jsfiddle.net/ja26Z/3/

Answer 2

或者您可以将#content div放在另一个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);
}

CSS：水平对齐div中的元素

3 个答案: