Center div yatay olarak

Question

this page'da, ana #container div sayfasını sayfaya göre yatay olarak ortalamak istiyorum. Normalde Ancak

#container { margin: 0 auto } 

, bu sayfayı (ben yazmadım olan) düzeni, #container için mutlak konumlandırma kullanır ve alt öğelerinden en, bu nedenle bu özellik vardır, CSS kuralı ekleyerek bunu başarmak istiyorum etkisi yok.

Düzenli konumlandırma kullanmak için düzeni yeniden yazmadan bu yatay ortalamayı başarabileceğim bir yol var mı? Benim hedefime ulaşmak için tek yol buysa JavaScript/JQuery kullanarak sorunum yok.

Answer 1

@Rquinn ile aynıdır ancak bu herhangi bir genişliğe göre ayarlanır. Bu demo kontrol

http://jsfiddle.net/Starx/V7xrF/1/

HTML:

<div id="container"></div> 

CSS:

* { margin:0;padding:0; } 
#container { 
    width:50px; 
    position:absolute; 
    height:400px; 
    display:block; 
    background: #ccc; 
} 

JavaScript

function setMargins() { 
    width = $(window).width(); 
    containerWidth = $("#container").width(); 
    leftMargin = (width-containerWidth)/2;  
    $("#container").css("marginLeft", leftMargin);  
} 

$(document).ready(function() { 
    setMargins(); 
    $(window).resize(function() { 
     setMargins();  
    }); 
}); 

Answer 2

Kapsayıcı genişliği 1024px, bu yüzden% 50 ve sol kenar boşluk bırakmaya çalışabilirsiniz: -512px.

Answer 3

Javascript kullanarak, bu, tarayıcınızın penceresinin ortasına #container koyacaktır.

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px'; 
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px'; 

Answer 4

da kullanabilirsiniz kullanabilirsiniz jQuery: Sonra

function setMargins() { 
    var width = $(window).width(); 
    if(width > 1024){ 
     var leftMargin = (width - 1024)/2; 
     $("#container").css("marginLeft", leftMargin);  
    } 
} 

Ben $(document).ready olaydan sonra bu kodu koyun: ana konteyner absolute pozisyonunu kullanıyorsa

$(document).ready(function() { 

    setMargins(); 

    $(window).resize(function() { 
     setMargins();  
    }); 
}); 

Answer 5

kullanabileceğiniz yatay olarak ortalamak için bu CSS;

#container { 
    position:absolute; 
    width:1000px; /* adjust accordingly */ 
    left:50%; 
    margin-left:-500px; /* this should be half of the width */ 
} 

Answer 6

Çok basit. bu

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */ 
} 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto". */ 
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
} 

Answer 7

Bu şekilde benim için en iyi çalıştı deneyin. Kenar boşluklarını değiştirmeden, ancak pozisyon. Gerekli: object -> kenar boşluğu: 0; ve pozisyon: göreli; Burada

onay örneği: jsfiddle Kodu:

function setObjPosition(container, object) { 
    var containerWidth = $(container).width(); 
    var objectWidth = $(object).width(); 

    var position = (containerWidth/2) - (objectWidth/2); 

    $(object).css('left', position); 
} 

function setPositionOnResize(container, object) { 
    setObjPosition(container, object); 
    $(container).resize(function() { 
     setObjPosition(container, object); 
    }); 
} 

Kullanım:

<script type="text/javascript"> 
    $(document).ready(function() { 
     setPositionOnResize(window, "#PanelTeste"); 
    }); 
</script> 

Herhangi kap içinde merkezli edilebilir.