Comment disposer des divs en 3 lignes de 3 éléments chacune?

Y a-t-il une façon simple de disposer les div "ligne1", "ligne2" et" ligne3" qui contiennent chacune 3 élements en inline-block ?
En quelque sorte, c'est un tableau (table) de trois lignes et trois colonnes.
Chaque cellule contient un div centré verticalement et horizontalement.
Le tableau est centré sur la page.
C'est possible ?

https://jsfiddle.net/fredericmarcel/1zwscL0z/3/

Merci de votre aide.
Modifié par fredericmarcel (02 Dec 2015 - 13:01)

Salut,

Disposer les lignes, il n'y en a pas besoin, par défaut elles se mettent les unes en dessous des autres donc c'est parfait.
Par contre il faut positionner les boites en inline-block pour les mettre côte à côte.
https://jsfiddle.net/1zwscL0z/4/

Si tu veux centrer horizontalement les boites il suffit de mettre un text-align:center; sur les lignes.

J'ai aussi du mal a comprendre l’intérêt d'avoir doublé la div .boite avec une div .saisie

Attention, les balises </p>, il manque des fois le " < "

J'arrive à le centrer au pif, mais pas de façon mathématique.
Ca risque de donner des résultats différents dans différents appareils.
https://jsfiddle.net/fredericmarcel/1zwscL0z/9/

Pour le centrage horizontal, comme je l'ai dis plus haut, un simple text-align:center; sur le parent suffit.

.visu {
    margin: auto;
    text-align:center;
 }

Pour le centrage vertical il y a plusieurs techniques :
http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

J'ai simplifié ma présentation.en enlevant les numéros.
https://jsfiddle.net/fredericmarcel/1zwscL0z/12/

Les p ne sont pas centrés verticalement.

Le tutorial m'aide beaucoup moins qu'une ou deux lignes de code dans mon fiddle.
Les textes des paragraphes vont être dynamiques : ils proviendront d'une base de donnée dans des variables dont la valeur changera en permanence.
Est-ce que je peux centrer verticalement en fonction de la longueur du texte dans un script javascript ?
Ce serait sans doute plus facile pour moi. J'ai vraiment du mal à faire ce que je veux avec css.

Le p doit être centré verticalement quel que soit l'écran sur lequel il est visualisé et quelle que soit la taille de police et le texte

Bon du coup j'ai repassé un coup de balai dans ton code.
Trop de CSS supperflu et j'ai viré les div.saisie en trop.

fredericmarcel a écrit :
Le tutorial m'aide beaucoup moins qu'une ou deux lignes de code dans mon fiddle.

Pour ça désolé de le dire comme ça mais ça pue le mec qui veux pas se faire chier a lire un truc et qui préfère quand on lui pose une solution toute prête dans l'assiette...

Pourtant l'article est super bien fait.
Sommaire > 3. Centrage vertical dans un conteneur de hauteur fixe avec : > plusieurs lignes de texte

PAF la solution en 10 lignes à savoir sur la cellule une line-height égale à la height et sur l'enfant un retour à line-height:normal; (ou autre) + un display:inline-block et un vertical-align:middle.

Franchement il suffit juste de suivre la recette !

Mais bon t'as le bénéfice du doute lors voilà : https://jsfiddle.net/1zwscL0z/13/

Mais que ce soit ton image fredericmarcel, ou le fiddle de _laurent (merci d'ailleurs) les p sont centrés verticalement, je comprend pas ton problème ?

les <p></p> sont centrés verticalement, ils ont un text align center, donc il sont centrés.
Modifié par JENCAL (02 Dec 2015 - 16:16)

bordel mais je suis débile !! désolé

Merci les amis
Je vais digérer tout cela et lire attentivement le tuto.
En tout cas, c'est maintenant centré grâce au fiddle de laurent. Mais comme je l'ai appliqué sans comprendre, je dois refaire le chemin demain matin.
Bonne soirée.
Ca m'a pris toute la journée pour faire un truc tout simple avec votre aide.
J'ai vraiment l'impression d'être un Nul de chez Nul
Modifié par fredericmarcel (02 Dec 2015 - 16:57)

erreur
Modifié par fredericmarcel (02 Dec 2015 - 16:58)

Bonsoir,

Désolé, j'avais pas vu la question, il n'y a pas encore de notification de réponse quand ça n'est pas notre sujet...

fredericmarcel a écrit :
Je maitrise Actionscript et je peux placer ce que je veux où je veux, l'aligner comme je veux en calculant d'après les coordonnées du viewport.

Tout placer au pixel près en absolute c'est ça ?

fredericmarcel a écrit :
Est-ce que je pourrais réaliser ce sur quoi nous avons travaillé aujourd'hui en codant avec javascript à partir d'éléments de base désignés par leur id?

J'imagine que c'est réalisable oui... la vraie question est celle que tu soulèves juste après :

fredericmarcel a écrit :
Ca me simplifierait tellement la vie.
Je dois traduire mon appli de flash/actionscript en html5/css3/javascript/php/msql et à ce rythme, je vais dépasser mes délais et surtout ramer et ramer et ramer.
J'ai l'impression que ce devrait être beaucoup plus facile pour moi de créer les éléments avec html/css et même bootstrap et jquery et ensuite les manipuler à partir de leur id avec javascript.
Qu'en pensez-vous ?
Je sais que ce n'est pas orthodoxe, mais d'un point de vue pragmatique, ça me ferait gagner un temps fou.

J'en pense que tu répond tout seul à ta question hehehe
Si pour toi c'est plus facile et te permet de rentrer dans tes délais je n'ai pas d'argument supérieur si ce n'est la propreté du code.

Ça va effectivement faire une truc pire que simplement "pas orthodoxe" ! A première vu j'ai l'impression qu'il va falloir choisir entre un code propre et le respect des délais ! Mais bon je ne suis pas sur que tu y gagnes énormément à faire ça salement mais vite...

L'apprentissage n'est pas très compliqué comparé aux autres langages, je ne pense pas qu'il te prenne énormément plus de temps que tout calculer au pixel près. Ce temps est un investissement, tu le récupéreras sur le prochain projet. Tu gagneras en expérience (ça ne sera jamais le bon moment, si tu ne le fait pas un jour, tu ne le feras jamais -> procrastination powaaaaa) et en notoriété (auprès de celui qui passera derrière toi ou un futur recruteur qui analysera le code par exemple).

Mais bon si tu as un client et des délais et qu'il faut bien manger à la fin du mois je peux comprendre. Fait toi la main sur un projet perso sans stress


Luke Skywalker : Le côté obscur est le plus fort ?
Yoda : Non ! Non. Plus rapide, plus facile, plus séduisant.


Bonne soirée !