Alignement de texte vertical

Bonjour à tous,

Je me permet de vous posez une petite question, car je sèche sur un truc...

Voilà, je suis actuellement en train de faire l'exercice avec le CV pour la formation HTML / CSS et dans celui-ci il nous demande d'aligner les trois sections

Mon expérience
Mes compétences
Ma formation

Hors j'ai bien réussi a les aligner avec le flexbox, mais mon texte à l'intérieur de reste sur l'horizontal à l'intérieur

(Les titres et les texte sont aligner) Sauf que je veux avoir :

TITRE

Texte

Même avec le text-align cela ne fonctionne pas...

Pourriez-vous m'éclairer sur mes erreurs ?

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Johan CEUGNART</title>
    </head>
<body>
  <div id="corp">
  <div class="colonne" id="colonne">
  </div>

<section id="contenue">

  <div class="bloc_haut">
  <h1>Johan CEUGNART</h1>
  <h2>Apprenti developpeur web</h2>
  <p class="photo"><img src="images/photo_johan_mini.jpg" alt="Photo_de_Johan_Ceugnart" /></p>
  </div>

  <div class="infos">
  <h3 class="experience">Expérience professionnelles</h3>


  <ul>
	   <li><strong>Sept.2017 à aujourd'hui</strong> Responsable de rayon à TOURCOING</li>
	    <li><strong>Mai 2014 à sept.2017</strong> Responsable de rayon à BETHUNE</li>
	     <li><strong>Fev.2005 à mai 2014</strong> Vendeur rayon à Bailleul</li>
     </ul>


  <h3 class="competences">Mes compétences</h3>

  <ul>
	   <li>HTML 5 et CSS3</li>
	   <li>PHP (apprentissage)</li>
	   <li>SQL (ou pas :p) </li>
	   <li>Developpeur du dimanche</li>
	</ul>

  <h3 class="formation">Ma formation</h3>

    <p>Je prépare une formation en développement web à la WIL CODE SCHOOL de Lille et j'ai appris l'HTML avec <strong>OpenClassrooms !</strong></p>
  </div>
  </section>
</div>
</body>
</html>

et mon CSS:

/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face
{
	font-family:"Amatic SC Bold";
  src:url("AmaticSC-Bold.eot?") format("eot"),url("AmaticSC-Bold.woff") format("woff"),url("AmaticSC-Bold.ttf") format("truetype"),url("AmaticSC-Bold.svg#AmaticSC-Bold") format("svg");
  font-weight:normal;font-style:normal;
}

html, body, #corp
{
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Amatic SC Bold", Arial, serif;
	display: flex;
}

.bloc_haut
{
	width: 80%;
	display: flex;
}

.photo
{
	text-align: right;
}

.infos
{
	display: flex;
	justify-content: space-around;
}

.experience, .competences, .formation
{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
}

.colonne
{
	background: #d20202;
	width: 200px;
	height: 100%;
	border-radius: 10px;
}

#contenue
{
	display: flex;
	flex-wrap: wrap;
}

JohanCeugnart

4 janvier 2019 à 19:59:58

Zoki_Marciano

4 janvier 2019 à 20:40:25

il faut que tu crées une balise <article> pour chaque section ( expériences, formations, compétences ) et mettre le <h3> et <ul> correspondant dedans et mettre en forme à ta convenance.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

4 janvier 2019 à 22:18:14

En effet c'est beaucoup mieux et la réponse été sous mon nez depuis longtemps...

Merci bien

sur Flexbox

Alignement de texte vertical

Supprimer

Modérer

Signaler le message aux modérateurs