Javascript Girl
  1. Javascript Girl
  3. Centrer verticalement le partage enfant dans le conteneur parent avec JavaScript sur la charge de la page n'est-ce pas la position de réglage?
Intereting Posts
Datepicker pour la page Web qui ne permet pas de cliquer sur des dates spécifiques Est-ce une mauvaise pratique d'utiliser les gestionnaires d'événements en ligne en HTML? Rendre l'image pleine largeur centrée en div Valeur maximale autorisée pour <type d'entrée = "texte" /> Puis-je forcer jQuery à utiliser Sizzle pour évaluer un sélecteur sans utiliser de sélecteurs non standard? Mettre l'accent sur une zone de texte lorsqu'une fonction est appelée Comment récupérer toutes les données / mots dans une version en Javascript QuerySelectorAll avec plusieurs conditions Empêchez la référence circulaire window.getSelection () Webpack – extract-text-webpack-plugin Impossible de trouver le module Problème de sélection de texte sélectionné Javascript Pourquoi n'est-il pas égal à lui-même en Javascript? Faire un lien hypertexte à partir de javascript Quel est l'état de l'art actuel dans les bibliothèques et cadres JavaScript en toile HTML? Obtenir toutes les combinaisons pour une chaîne

Centrer verticalement le partage enfant dans le conteneur parent avec JavaScript sur la charge de la page n'est-ce pas la position de réglage?

J'utilise JavaScript pour centrer verticalement une division enfant dans un conteneur fluide. Je réalise essentiellement ceci en calculant la hauteur du conteneur parent et la hauteur de la division enfant. Je pose absolument la division enfant dans le centre de la division parent en fonction de la hauteur. Le problème que j'ai éprouvé est que lorsque la page est chargée, elle ne définit pas la position de la division enfant. J'ai créé une fonction à partir de cela et l'appeler lorsque la fenêtre est redimensionnée de sorte que lorsque la fenêtre change, elle recalcule dynamiquement. Comment puis-je aborder initialement cette position sur le chargement de la page? 

<div class="lead"> <div class="message"></div> </div> var homepageLead = function () { var lead = $('.lead'), message = $('.message'), lead_height = lead.height(), message_height = message.height(), lead_center = .5 * lead_height, message_center = .5 * message_height, center = (lead_center - message_center); message.css('bottom',center); } homepageLead(); $(window).resize(function () { homepageLead(); });

Essayez ce violon: http://jsfiddle.net/nRRn6/

Utilisé css: 

 html, body { height:100%; } .lead { width:100%; height:100%; background:red; position:relative; } .message { width:120px; height:200px; background:yellow; position:absolute; /* <---required*/ left:0; /* <---required*/ bottom:0; /* <---required*/ }

Utilisé html: 

 <div class="lead"> <div class="message"></div> </div>

Utilisé jQuery: 

 var homepageLead = function () { var lead = $('.lead'), message = $('.message'), lead_height = lead.height(), message_height = message.height(), lead_center = .5 * lead_height, message_center = .5 * message_height, center = (lead_center - message_center); return message.css('bottom', center); }; $(function () { $(window).resize(function () { homepageLead(); }).resize(); });