bonjour à tous,
bien que agé de 84 printemps, je fais toujours partis des nuls en informatique, mais parmis mes défauts, j'ai celui de ne pas accepterles sites réalisés avec le style wordpress, je veux seulement ce qui est totalement écris, mais c'est surement l'époque.
J'ai essayé d'utiliser les flexbox pour supprimer l'usage des tables ce qui, effectivement me facilite la vie mais parfois m'em..... car je ne trouve aucune solution.
actuellement, j'essaye de construire un menu vertical avec 8 positions comportant a chaque fois une icone et le texte explicatif accolé. je voudrais que le texte sois centré verticalement comme l'icone, mais impossible d'y arriver.
(voir la copie écran)
en css, j'ai :

body { height: 100%; width: 100%; text-align: center; background-image: url(fichiers%20generiques/fond-region.jpg); line-height: 20%; z-index: 1; }
.ferm_window { position: absolute; top: 14px; left: 341px; width: 213px; height: 74px; font-size: 22px; line-height: 20px; text-align: center; font-family: "Brush Script Std"; color: #FFFF00; background-color: #666666;z-index: 500; }
.description { position: absolute; top: 7%; left: 18%; width: 1200px; height: 1200px; background-image: url(../Flexbox%200%20%E2%80%94%20essai%20fenetres/fichiers%20generiques/fond_cisalpin.jpg); overflow-y: scroll; line-height: 120%; z-index: 200; text-align: center; border: solid 1px; margin: 2px 10px 2px; }
#menu_1 { position: absolute; top: 33px; left: 12px; width: 260px; z-index: 100; height: 700px; background-position: 0% 0%; margin-left: 2px; }
* {box-sizing: border-box;}
p { margin: 0 0 1em 0; }
.contenir {  display: justify-content-center; flex; align-items: center; flex-direction: column; width: 300px; }
.item { padding: 2px; text-align:left;align-items:center; border: 2px solid rgba(111,41,97,.5); flex: 1 1 0; }
</style>


en html

</head>
<body>
<!-- ***************** menu 1 **************************************** -->
<div id="menu_1">
<div class="contenir" id="contenir">
<div class="item"><img src="icones/folder_presentation.png" /><a href="#pop1" class="pop">&nbsp;Présentation</a></div>
<div class="item"><img src="icones/folder_cabanes.png" /><a href="#pop2" class="pop">&nbsp;Cabanes de bergers</a></div>
<div class="item"><img src="icones/folder_violettes.png" /><a href="#pop3" class="pop">&nbsp;Club du temps libre</a></div>
<div class="item"><img src="icones/folder_chasseurs.png" /><a href="#pop4" class="pop">&nbsp;Chasseurs</a></div>
<div class="item"><img src="icones/folder_festigranges.png" /><a href="#pop5" class="pop">&nbsp;Festigranges</a></div>
<div class="item"><img src="icones/folder_foyer-rural.png" /><a href="#pop6" class="pop">&nbsp;Foyer rural</a></div>
<div class="item"><img src="icones/folder_belvedere.png" /><a href="#pop7" class="pop">&nbsp;Hauteroche</a></div>
<div class="item"><img src="icones/folder_voies-sel.png" /><a href="#pop8" class="pop">&nbsp;Voies du sel</a></div>
</div>
<!--date de mise à jour -->
    <p class="titre1">  </p><p align="left" font-size:20px;>dernière mise a jour
       <?php       
            $ressource = fopen('mise-jour_manifs.txt', 'rb');
            echo fread($ressource, filesize('mise-jour_manifs.txt'));
        ?>	
     </p>  
<br />
 <p align="left"><a href="../cisalpin/index.php"><img src="fichiers generiques/contacts.jpg" width="160" height="16" /></a></p>
 <p align="left"><a href="../cisalpin/index.php"><img src="fichiers generiques/pageprecedente.jpg" width="160" height="16" /></a></p>
<br />
<!-- compteur de visites  _____ compteur_manif.txt -->
 <p class="titre1">  </p>
 <p align="left" font-size:20px;>; 
 <?php
$fichier = fopen("compteur_visites.txt", "r+");  
$nombreVisites = fgets($fichier, 255);
$nombreVisites++;
fseek($fichier, 0);
fputs($fichier, $nombreVisites);
fclose($fichier);  
echo 'Visiteurs : '.$nombreVisites;   
?>  
<p align="left" font-size:20px;>&nbsp;Nous sommes le :&nbsp;
<?php 
			echo date("d-m-Y");
	?>
<p align="left" font-size:20px;>&nbsp;<br />&nbsp;<br /></p> 
 
</div>
<!-- ***********     fin menu 1      **************** -->



malgré toutes mes recherche et les essais avec align-items ou autre, je ne suis pas arrivé à avoir le texte explicatif au centre du box !!!!! Je ne sais ou je fais l'erreur.
Merci de vos conseils.
Modifié par Felipe (14 Apr 2023 - 19:46)
Modérateur
Bonjour,

En remplaçant
.contenir { display: justify-content-center; flex; align-items: center; flex-direction: column; width: 300px; }
.item { padding: 2px; text-align:left;align-items:center; border: 2px solid rgba(111,41,97,.5); flex: 1 1 0; }
par
.contenir {
	display: flex;
	flex-direction: column;
}
.item {
	display: flex;
	align-items: center;
	padding: 2px;
	border: 2px solid rgba(111,41,97,.5);
}
ça devrait suffire !

Commentaire :
1) il y avait une erreur de syntaxe dans .contenir {...}, ce qui l'empêchait d'être du flex,
2) il fallait aussi déclarer les .item comme étant du flex ici pour pouvoir centrer verticalement leurs contenus avec la propriété align-items.

Amicalement,
Bonjour Parsimonhi et merci de votre prompte réponse,
comme je l'ai déjà indiqué dans d'autres messages, je suis autodidacte en programmation internet et vu mon age, ça me pose quelques problèmes.
je suis occupé à réecrire un site en essayant d'utiliser flexbox pour me faciliter la tâche. La page complète est visible
https://manifestation.cisalpin.fr/index_manifestation.php

page en cours de réalisation avec les essais flexbox que j'essaye d'utiliser.
Je regrette un peu que les explications fournies sur le net sont surtout destinées aux gens "avertis" dont je ne fais pas partie. C'est vrai que la mémoire fout le camp à mon age et si ce n'est pas encore Alzheimer, ça approche.
Merci encore pour votre aide, j'ai bidouillé plusieurs trucs et cela fonctionne. Je vais essayer de terminer mes pages rapidement
Modifié par helvetdulac (14 Apr 2023 - 17:00)