Maison > interface Web > tutoriel CSS > Comment aligner deux blocs Div sur la même ligne en utilisant CSS ?

Comment aligner deux blocs Div sur la même ligne en utilisant CSS ?

Patricia Arquette
Libérer: 2024-11-03 15:40:03
original
469 Les gens l'ont consulté

How do I align two Div blocks on the same line using CSS?

Alignement de deux blocs div sur la même ligne

Pour aligner deux blocs div sur la même ligne, vous pouvez utiliser des propriétés CSS comme text-align et affichage.

CSS :

<code class="css">#block_container {
    text-align: center;
}

#bloc1, #bloc2 {
    display: inline;
}</code>
Copier après la connexion

HTML :

<code class="html"><div id="block_container">
    <div id="bloc1"><?php echo " version " . $version . " Copyright &copy; All Rights Reserved."; ?></div>
    <div id="bloc2"><img src="..."></div>
</div></code>
Copier après la connexion

Suivez ces directives pour garantir un bon alignement :

  • Enveloppez les blocs div dans un conteneur div (#block_container) et définissez son texte est aligné au centre.
  • Définissez la propriété d'affichage des blocs div (#bloc1 et #bloc2) sur inline pour les faire apparaître sur la même ligne.
  • Pour les meilleures pratiques, évitez placer le contenu brut directement dans les balises div et utiliser à la place des balises sémantiques telles que

    ou pour le texte.

En appliquant ces styles, les deux blocs div s'aligneront horizontalement sur la même ligne au sein de leur conteneur.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal