Contenu du centre CSS à l’intérieur de div

J’ai besoin de centrer le contenu HTML dans un div class = “partners” (div supérieur avec 2 images). Comme vous pouvez le voir sur l’image ci-dessous (il flotte à la place du centre de la div):

entrer la description de l'image ici

Ceci est mon code HTML:

Partnertnerzy serwisu:

  • Parnter bar wika
  • Parnter bar siemens
Zamknij

Image: entrer la description de l'image ici

CSS:

 #partners, #top { position: relative; z-index: 100; } #partners { margin: 12px 0 3px; text-align: center; } .clearfix:after, .row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } #partners .wrap { width: 655px; } .wrap { margin: 0 auto; position: relative; width: 990px; } #partners h2 { color: #A6A5A5; float: left; font-weight: normal; margin: 2px 15px 0 0; } #partners ul { float: left; } ul { list-style-position: outside; list-style-type: none; } 

Pour centrer un div, définissez sa largeur sur une valeur et ajoutez une marge: auto.

 #partners .wrap { width: 655px; margin: auto; } 

EDIT, vous voulez centrer le contenu div, pas le div lui-même. Vous devez modifier la propriété d’affichage de h2 , ul et li en inline et supprimer le float: left .

 #partners li, ul, h2 { display: inline; float: none; } 

Ils seront ensuite disposés comme des éléments de texte normaux et alignés en fonction de la propriété text-align de leur conteneur, ce qui est ce que vous voulez.

Il existe plusieurs façons de centrer un élément. J’en ai énuméré quelques

  1. Définissez sa largeur sur une valeur et ajoutez une marge: 0 auto.
 .partners { width: 80%; margin: 0 auto; } 

Essayez d’utiliser Flexbox. Par exemple, le code suivant montre le code CSS du conteneur div à l’intérieur duquel le contenu doit être centré:

 .absolute-center { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } 

Le problème est que vous avez atsortingbué une largeur fixe à votre .wrap DIV. La DIV elle-même est centrée (vous pouvez le voir lorsque vous ajoutez une bordure), mais la DIV est juste trop large. En d’autres termes, le contenu ne remplit pas toute la largeur de la DIV.

Pour résoudre le problème, vous devez vous assurer que la variable .wrap est aussi large que son contenu.

Pour ce faire, vous devez supprimer le flottant dans les éléments de contenu et définir la propriété d’ display des éléments de niveau de bloc sur inline :

 #partners .wrap { display: inline; } .wrap { margin: 0 auto; position: relative;} #partners h2 { color: #A6A5A5; font-weight: normal; margin: 2px 15px 0 0; display: inline; } #partners ul { display: inline; } #partners li {display: inline} ul { list-style-position: outside; list-style-type: none; } 

fait comme ça :

 child{ position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } 

Vous avez juste besoin

 .parent-div { text-align: center; }