Maison > Article > interface Web > Qu'est-ce que le centrage en javascript

Qu'est-ce que le centrage en javascript

WBOYoriginal: 2023-05-29 11:30:082231parcourir

En tant que l'une des compétences essentielles pour le développement front-end, JavaScript propose une variété de « petites astuces » pour améliorer l'apparence des pages Web. Lors de la conception de pages Web, nous devons souvent centrer des éléments, notamment du texte, des images, des cadres, etc. Le centrage JavaScript est un moyen de réaliser ce processus.

Le principe du centrage JavaScript est d'obtenir la largeur et la hauteur de la page, puis de calculer la position de centrage en fonction de la taille et de la position de l'élément à centrer, puis d'ajuster la position de l'élément pour l'afficher au centre . Il existe de nombreuses méthodes de mise en œuvre spécifiques. Ci-dessous, nous les présenterons une par une et expliquerons les différences, les avantages et les inconvénients de chaque méthode.

Méthode 1 : utilisez la disposition de style CSS pour réaliser

Tout d'abord, nous devons définir le style CSS de l'élément à centrer, le positionner comme une position absolue et définir ses attributs gauche et haut à 50 %, de sorte que le L'élément peut être centré L'élément est traduit vers la droite et vers le bas afin qu'il soit aligné au centre de la page. Cependant, vous devez faire attention à définir des valeurs de marge négatives à ce stade afin d'ajuster la position de l'élément.

L'implémentation spécifique du code est la suivante :

<style>
.center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*元素宽度的一半*/
margin-top: -50px; /*元素高度的一半*/
width: 200px;
height:100px;
}
</style>
<div class="center">这是要居中的元素</div>

Méthode 2 : utiliser des éléments de tableau HTML pour obtenir

Vous pouvez également utiliser la balise table en HTML pour obtenir l'effet de centrage. Dans le tableau, placez deux tableaux vides d'égale largeur à gauche et à droite de l'élément à centrer pour occuper l'espace restant du tableau. Dans cette méthode, il n'est pas nécessaire d'utiliser des feuilles de style CSS ni des scripts JavaScript, la quantité de code est relativement faible et elle convient à la gestion de certains problèmes de centrage simples.

L'implémentation spécifique du code est la suivante :

<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
这是要居中的元素
</td>
</tr>
</table>

Méthode 3 : Utiliser un script de langage JavaScript pour y parvenir

Enfin, nous pouvons utiliser le langage JavaScript pour réaliser le centrage, qui offre une meilleure flexibilité et personnalisation et peut être utilisé pour gérer divers problèmes de centrage dans cette situation.

L'implémentation spécifique du code est la suivante :

<script>
function centerDiv() {
var div = document.getElementById('TestDiv');
div.style.position = 'absolute';
div.style.top = (document.documentElement.clientHeight - div.offsetHeight) / 2 + 'px';
div.style.left = (document.documentElement.clientWidth - div.offsetWidth) / 2 + 'px';
}
</script>
<body onresize="centerDiv()">
<div id="TestDiv">
这是要居中的元素
</div>
</body>

Cette méthode d'implémentation nécessite l'exécution de la fonction centerDiv() après le chargement de la page. La fonction principale de la fonction est d'obtenir la largeur et la hauteur de l'écran ainsi que la largeur et la hauteur. de l'élément lui-même, puis calculez et ajustez la position.

Résumé :

Les trois méthodes ci-dessus ont toutes leurs propres avantages et leur propre champ d'application. Les développeurs peuvent choisir la méthode la plus appropriée pour centrer les éléments en fonction de circonstances spécifiques, ce qui garantit non seulement la flexibilité et la personnalisation, mais permet également d'obtenir les meilleurs effets visuels. Dans le même temps, certains détails doivent être pris en compte lors de la mise en œuvre, comme la compatibilité avec différents navigateurs, etc. Il est nécessaire de bien comprendre et tester diverses méthodes avant utilisation pour éviter des problèmes supplémentaires causés par des problèmes de compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que comprend la tâche macro Javascript ?Article suivant：Que comprend la tâche macro Javascript ?

Articles Liés

Voir plus