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

回答

相關問題