J'essaie de centrer à la hauteur A DIV, mais cela ne fonctionne pas lorsque je redimensionnez l'écran du navigateur.
Comment éditer ceci pour obtenir la marge-haut réglable sur redimensionner? p>
Merci Vous P>
<script>
var h = $(window).height();
var parentHeight = h;
var childHeight = $('#a-middle').height();
$('#a-middle').css('margin-top', (parentHeight - childHeight) /2);
</script>
14 Réponses :
gérer la fenêtre de la fenêtre_Resize de la fenêtre actuelle et essayez de mettre au-dessus de code ci-dessus.
Il devrait vous donner des fonctionnalités de confiance.
Vous devez vous en tenir à une solution CSS cependant, il existe plusieurs moyens d'atteindre ce jsfiddle: https://jsfiddle.net/jorjmt70/ ou à l'aide de flexbox jsfiddle: https://jsfiddle.net/mdh9h876/ Si vous souhaitez utiliser Flex Box Utiliser Autoprefixer pour devenir plus profond de Navigersupport:
https://github.com/postcss/autoprefixer
Merci mais j'ai ajouté votre premier bloc sur # A-Middle et n'a pas fonctionné
C'est génial, merci. Disons que je veux le mettre 30px au-dessus du centre. Comment éditer le CSS?
Flexbox ne fonctionnera pas dans IE9 et vous devez également préfixer Flexbox et transformer
utiliser Margintop pour définir un décalage
Toute façon de le faire en s'appuyant sur mon code existant?
PLZ ajoutez également votre HTML et CSS
$(window).resize(function () {
var h = $(document).height();
var parentHeight = h;
var childHeight = $('#imagegallery').height();
$('#imagegallery').css('margin-top', (parentHeight - childHeight) / 2);
});
Pour moi, c'est le Saint Graal de CSS :)
La méthode la plus fiable que j'ai trouvée est la définition de l'élément de conteneur comme suit: Il est simple et n'a aucune condition préalable sur aucune autre propriété CSS. P> Le violon ci-dessous place le contenu 30px au-dessus du centre vertical: p> p>
<div id="container">
<span id="content">Content</span>
</div>
pour un div appelé "centre-moi": Vous devez l'appeler lorsque le document est prêt, pour l'obtenir centré sur la première place, puis sur Redize-Event, garder cela centré. Voici le violon: Fiddle
Bien que vous puissiez facilement faire cela avec Pure CSS, votre pronony a indiqué que vous souhaitez une réponse JS.
Si vous êtes intéressé par une réponse CSS pure, voir Cette réponse a plusieurs méthodes différentes sur la manière de centrer des éléments verticalement / horizontalement. < / p>
Vous pouvez simplifier votre jQuery aux éléments suivants: alors vous pouvez simplement placer cela dans un ICI ici redimensionner événement Auditeur et chaîne la méthode .Resize () afin de déclencher l'événement initialement lorsque le navigateur se charge. équivalent JavaScript (sans jQuery):
Une solution CSS pourrait faire le tour pour vous.
p>
<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
Cette approche est très utile lorsque vous souhaitez centrer à la fois verticalement et horizontalement une position absolue div. Il fonctionne également sur Vous devez définir les divs externes et les divs intérieurs comme Vous pouvez également régler la hauteur et la largeur de la .in div et que vous le verriez toujours au courant de la verticale et que vous avez centrés également lorsque vous redimensionnez le navigateur. Exemple 2 - Jsfiddle Hauteur fixe, largeur fixe
http://jsfiddle.net/a_incarnati/1o5zzxcgh/4/
Donner l'affichage: cellule de table; au parent et alignez le contenu verticalement à l'aide de vertical-aligner et donnez au rembourrage pour régler l'espacement nécessaire de la partie supérieure.
.child{
display:table-cell;
vertical-align:top;
padding-top: 50px;
}
Utilisez CSS
Donnez d'abord une hauteur à votre élément. ou utilisez js
Le problème avec les solutions précédentes est que vous ne pourrez pas centrer la DIV, s'il est plus grand que la taille verticale disponible.
Si vous voulez que votre DIV prenne 50% de la page, vous pouvez utiliser le Unité à base de hauteur verticale CSS: de sorte que votre div sera non seulement centré mais entretenir son rapport.
Jouer avec la marge-gauche et la marge de cette DIV, à l'aide de la largeur et de la hauteur de la fenêtre et de la div. ici est jsfiddle pour votre référence https://jsfiddle.net/fnuud7g6/
Ceci peut être réalisé en utilisant des CSS simples avec Support de navigateur profond sur IE8 .
p>
<div class="parent">
<div class="child">This is always centered.</div>
</div>Bonne explication. Sans JavaScript, c'est génial.
Pour que DIV reste toujours au centre de l'écran, les propriétés que vous pouvez utiliser sont des attributs de haut et de gauche après avoir défini l'attribut de position à l'absolu. Cependant, vous devrez définir ces propriétés de manière dynamique lorsque le navigateur est redimensionné. Ceci peut être fait à l'aide de la méthode JQuery - redimensionnement ().
/*css code*/
.div{
position:absolute;
top:100px;
left:50px;
background:black;
}
/*JS Code*/
function keep_div_centered()
{
window_height = $(window).height();
window_width = $(window).width();
obj_height = $('.keepincenter').height();
obj_width = $('.keepincenter').width();
$('.keepincenter').css('top',(window_height/2)-(obj_height/2)).css('left',(window_width/2)-(obj_width/2))
}
keep_div_centered();
$(window).resize(function(){
keep_div_centered();
})
/* HTML Code */
<div class="keepincenter"></div>
Devez-vous soutenir IE9? Autres sages Vous pouvez utiliser Flexbox sans JavaScript: Caniuse.com/#search=flex
Pourriez-vous nous fournir un extrait de code pour montrer le problème?