centre horizontalement dans le parent

Sur this page Je montre une liste d'artistes apparaissant lors d'un festival. Le placement de l'artiste <div> s est contrôlé par isotope (il était très difficile d'obtenir tout à la programmation correctement en utilisant CSS seul quand il ya un grand nombre d'artistes et l'artiste div s sont différentes hauteurs).centre horizontalement dans le parent

De toute façon, je voudrais centrer les divs artistes dans leur conteneur parent de sorte qu'il y ait une quantité égale d'espace blanc à gauche et à droite des artistes, comme illustré ci-dessous.

enter image description here

J'ai essayé toutes les choses évidentes comme:

margin: 0 auto 
text-align: center

Mais pas de chance jusqu'à présent ....

Source

2013-05-19 Dónal

essayez bootstrap, j'ai attaché une réponse ci-dessous il va rendre votre vie tellement plus facile :) –

@DoryZidon J'utilise déjà bootstrap, mais pour ce contenu qui est de hauteur/largeur variable, la grille ne fonctionne pas bien –

Avez-vous essayé d'utiliser quelque chose comme une grille d'amorçage? Cela rendra votre vie tellement plus facile.

vous venez de définir un conteneur et la grille bootstrap fera tout le travail de levage pour vous. comprennent adapter à différents périphériques :)

<!-- simple three column display that will take seconds to create --> 
<div class="container"> 
    <div class="row"> 
    <div class="span4">/div> 
    <div class="span4">/div> 
    <div class="span4"></div> 
</div>

Bootstrap Grid from Twitter Guide

Bootstrap Text Tutorial

Bootstrap Video Tutorial

Source

2013-05-19 20:10:32

Je suis déjà en train d'utiliser Bootstrap, mais dans ce cas particulier, les 'div's de l'artiste peuvent tous être de hauteurs et de largeurs différentes, donc une grille ne fonctionne pas vraiment –

Le parent doit avoir

text-align:center; width:abc;

et une certaine largeur. Ensuite, l'enfant doit avoir

margin:auto; text-align:left; width:xyz;

Exemple:

<div style="width:100%; text-align:center;"> 
    <div style="width:50%; text-align:left; background:red; margin:auto;"> 
     This will do it just right 
    </div> 
</div>

si cela ne fonctionne pas, vous devriez vraiment vérifier si quelque chose d'autre influence le comportement!

Source

2013-05-19 20:10:42 androidavid

centre horizontalement dans le parent

Répondre

Questions connexes