CSS：水平对准一个div

我试图一个div内水平对齐的元件（<div id='content'>）内的元件（<div id='container'>）CSS：水平对准一个div

content可以比容器的宽度更窄或更宽。我需要它是总是以为中心。

你如何使用CSS3做到这一点？

2013-07-05 Aximili

看看[这个问题]（http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally ？rq = 1）并查看是否有帮助。 :) – icedwater

或者你可以将#content格在另一个DIV：

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

来源

2013-07-05 01:55:18 Mathijs

我刚刚意识到我的容器宽度也可以改变。但这是问题的最佳答案。 – Aximili

这么简单，如此有效。好东西：） – lukeocom

基本上你了吧，只是一个拼写错误。更新你的CSS美国的拼写，text-align:center;

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

来源

2013-07-05 01:40:29 lukeocom

啊谢谢我想知道为什么它没有工作。但它不能解决内容比容器更宽的问题。 – Aximili

是的，这是一个用CSS解决的难题。如果你找到解决方案，我很想看看解决方案。虽然它可能会更快写一个脚本... – lukeocom

如何：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); 
}

来源

2013-07-05 01:40:34 Stanley

CSS：水平对准一个div

回答

相关问题