Comment utiliser la technologie fit-content pour centrer les éléments de la page horizontalement-tutoriel CSS-php.cn

Comment utiliser la technologie fit-content pour centrer les éléments de la page horizontalement

WBOY

Libérer： 2023-09-08 12:55:52

original

1147 Les gens l'ont consulté

Comment utiliser la technologie fit-content pour centrer les éléments de la page horizontalement

Comment utiliser la technologie d'ajustement du contenu pour centrer les éléments de page horizontalement

Dans la conception et le développement Web, le centrage horizontal est une technologie de mise en page courante et importante. Dans le passé, nous utilisions souvent margin: 0 auto pour réaliser un centrage horizontal. Cependant, à mesure que de nouvelles propriétés de mise en page en CSS continuent d'apparaître, nous disposons désormais de plus de choix.

L'une des techniques puissantes consiste à utiliser l'attribut fit-content. Il peut calculer automatiquement une largeur appropriée en fonction de la taille réelle du contenu de l'élément pour obtenir un centrage horizontal. Ci-dessous, nous présenterons en détail comment utiliser la technologie fit-content pour réaliser un centrage horizontal et joindrons des exemples de code.

Tout d'abord, nous avons besoin d'un fichier HTML comme exemple. Nous créons un fichier de style style.css et référençons le fichier de style dans le fichier HTML. Le contenu du fichier HTML est le suivant :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h1>水平居中示例</h1>
    </div>
</body>
</html>

Copier après la connexion

Ensuite, nous écrivons le code CSS dans le fichier de style style.css. Tout d’abord, nous définissons une largeur et une hauteur pour la classe .container et la définissons sur un positionnement relatif afin de pouvoir la positionner à l’intérieur. Le code est le suivant :

.container {
  width: fit-content;
  height: 200px;
  position: relative;
}

Copier après la connexion

Ensuite, nous définissons le positionnement absolu de l'élément à l'intérieur du .container et utilisons la méthode translateX de l'attribut transform pour centrer l'élément horizontalement. Le code est le suivant :

.container h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

Copier après la connexion

Grâce au code ci-dessus, nous avons utilisé avec succès la technologie fit-content pour réaliser un centrage horizontal des éléments de la page.

Ensuite, nous pouvons ouvrir le fichier HTML dans le navigateur et voir l'effet. Après avoir ouvert le fichier HTML dans le navigateur, nous verrons que l'élément a été centré horizontalement au milieu de la fenêtre du navigateur.

Utiliser la technologie fit-content pour réaliser un centrage horizontal est non seulement simple mais aussi efficace. Il garantit que l'élément s'adapte toujours à la taille de son contenu et le maintient aligné horizontalement et au centre de la page. Quelle que soit la longueur du contenu, les éléments peuvent rester centrés horizontalement, ce qui apporte une grande commodité à la mise en page de notre page Web.

Pour résumer, en utilisant la technologie fit-content, nous pouvons facilement réaliser un centrage horizontal des éléments de la page. Non seulement cette approche est simple, mais elle garantit également que l'élément s'adapte à la taille de son contenu. Ceci est très utile dans la conception et le développement de sites Web et peut conduire à une meilleure expérience utilisateur. J'espère que les exemples de code dans cet article seront utiles !

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser la technologie fit-content pour centrer les éléments de la page horizontalement