Comment faire pour centrer plusieurs divs à l'intérieur d'un conteneur en CSS

Je suis en train de tester pour cloison centrale comme le style des fenêtres de métro.
si vous cochez la case code suivant:

CSS:

.container {
    height: 300px;
    width: 70%;
    background: #EEE;
    margin: 10px auto;
    position: relative;
}
.block {
    background: green;
    height: 100px;
    width: 100px;
    float: left;
    margin: 10px;
}

HTML:

<div class="container">
  <div class="block">1. name of the company</div>
  <div class="block">2. name of the company</div>
  <div class="block">3. name of the company</div>
  <div class="block">4. name of the company</div>
  <div class="block">5. name of the company</div>
  <div class="block">6. name of the company</div>
  <div class="block">7. name of the company</div>
  <div class="block">8. name of the company</div>
</div>

La zone grise est de 70% et le centrage sur l'écran qui est correct, mais quand je fais la fenêtre plus large et le vert diviseurs sont en mouvement, vous pouvez voir que les zones vertes à un certain point, ne sont pas centrées.

Je suis à la recherche de ce déjà toute la journée :s

Comment peut m'aider sur ce coup?

InformationsquelleAutor Jan Van Looveren | 2013-06-19

css html

74

On pourrait appliquer le style text-align:center; à votre conteneur et d'afficher votre .blocks inline-block éléments:

CSS:
```
.container {
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

.block {
  background: green;
  height: 100px;
  width: 100px;
  display:inline-block;
  margin: 10px;
}
```
HTML:
```
<div class="container">
   
        <div class="block">1. name of the company</div><div class="block">2. name of the company</div><div class="block">3. name of the company</div><div class="block">4. name of the company</div><div class="block">5. name of the company</div><div class="block">6. name of the company</div><div class="block">7. name of the company</div><div class="block">8. name of the company</div>
</div>
```
Voici une mise à jour de Violon

Avis j'ai commenté le blanc-espace entre votre <div>s. Parce que les éléments sont maintenant affichés en ligne, vos espaces de réception vous sera envoyé. C'est une des nombreuses façons "lutter contre l'espace".
- près de là, je pense que, si je le fais à l'écran plus petit, la zone est le centre perfectlly, mais si je le fais, 3-3-2 des boîtes et de la ligne du bas est également centré, ut en fait ils doivent s'aligner sous la case à cocher 1 et à la colonne 1
- Alors, comment avez-vous résolu le problème de la dernière ligne étant centré plutôt que alignée à gauche, dans la 3-3-2 cas?
- Ce qui semble être le problème si vous souhaitez un alignement différent vous pouvez modifier text-align de .container: jsfiddle.net/Np4tA/558
- si vous modifiez l'alignement du conteneur - puis les divs ne sont pas plus centrée. L'OP semble vouloir 2 choses: 1) centre de divs dans le conteneur et 2) de la dernière ligne alignée à gauche
- Je pense que vous êtes à la recherche de quelque chose comme ceci: Comment obtenir des tuiles centré et aligné à gauche en même temps
- SI vous voulez le fond de la 3-3-2 à être aligné à gauche, utilisez float:left;, je voulais CETTE réponse de @George, mais ne pouvais pas comprendre pourquoi mon 3-3-2 a été aligné à gauche jusqu'à ce que j'ai enlevé le "float:left;"
InformationsquelleAutor George
7

si vous changez le style de votre .block élément de sorte qu'au lieu de float:left; vous utilisez display:inline-block; vous pouvez ensuite ajouter text-align:center à la .container

Exemple

InformationsquelleAutor Pete

Donc, fondamentalement, votre CSS besoins de ces changements

.container { text-align:center; }
.block { display:inline-block; *display:inline; zoom:1; vertical-align:top; }

de faire le CSS compatible avec IE7.

Pour aligner le bas des tuiles sur le côté gauche, un peu de javascript est nécessaire. En raison de .querySelector() de compatibilité ascendante, les travaux suivants partout, y compris IE8+; pour la simplification et la compatibilité IE7 jQuery est fortement recommandé:

if (!window.addEventListener) {
window.addEventListener = function (type, listener, useCapture) {
attachEvent('on' + type, function () {
listener(event);
});
};
}
window.addEventListener('load', makePaddings, false);
window.addEventListener('resize', makePaddings, false);
function makePaddings() {
var container = document.querySelector('.container');
var blocks = document.querySelectorAll('.block');
var br = [],
max = 0,
i = 0;
var top = blocks[0].getBoundingClientRect().top;
while (blocks[i] && blocks[i].getBoundingClientRect().top == top) {
i++;
}
var show = blocks.length % i ? i - blocks.length % i : 0; /* how many paddings are needed */
var paddings = document.querySelectorAll('.padding');
if (paddings.length < show) { //add missing paddings
i = show - paddings.length;
while (i--) {
var elem = document.createElement('div');
elem.className = 'padding';
elem.style.visibility = 'hidden';
container.appendChild(elem);
}
paddings = document.querySelectorAll('.padding');
}
for (i = 0; i < paddings.length; i++) {
paddings[i].style.display = (i < show) ? 'inline-block' : 'none';
}
}

jsfiddle

InformationsquelleAutor Stano

Maintenant, vous pouvez utiliser Flexbox propriété comme base pour vos mises en page. Cela permettra d'avoir plus de contrôle sur les éléments d'enfant.

CSS:

.container {
width: 70%;
background: #EEE;
margin: 10px auto;
position: relative;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}

HTML:

<div class="container">
  <div class="block">1. name of the company</div>
  <div class="block">2. name of the company</div>
  <div class="block">3. name of the company</div>
  <div class="block">4. name of the company</div>
  <div class="block">5. name of the company</div>
  <div class="block">6. name of the company</div>
  <div class="block">7. name of the company</div>
  <div class="block">8. name of the company</div>
</div>

Remarque: Vous devez avoir besoin de valider la soutien et peut-être besoin d'un certain vendeur de préfixes. Mais qu'en avril 2017, la plupart des navigateurs permettent à l'utilisation.

InformationsquelleAutor DaniP

CSS:

.container {
background: lightgrey;
height: auto;
width: 70%;
margin: 10px auto;
position: relative;
display: flex;
flex-wrap: wrap;  
justify-content: space-around;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}

HTML:

<div class="container">
  <div class="block">1. name of the company</div>
  <div class="block">2. name of the company</div>
  <div class="block">3. name of the company</div>
  <div class="block">4. name of the company</div>
  <div class="block">5. name of the company</div>
  <div class="block">6. name of the company</div>
  <div class="block">7. name of the company</div>
  <div class="block">8. name of the company</div>
</div>

InformationsquelleAutor antelove

-1

<body>
<div class="container">
<div style="width:78%; margin:0 auto;">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>
</div>
</body>

Essayer cette div "<div style="width:78%; margin:0 auto;">"

à l'aide de styles en ligne est vraiment une mauvaise pratique
Je sais qu'mais juste exemple pour cela.
okey................... 🙂
Il n'y a pas de comparaison entre le CSS a déclaré directement sur un élément et le CSS a déclaré dans une feuille de style. Chacun a ses avantages. Voir stackoverflow.com/questions/2612483/...

InformationsquelleAutor sarfaraj

Vous devez vous connecter pour publier un commentaire.