Bonjour, 

Je suis en train de réaliser mon 1er projet, un portfolio, mais j'ai quelques petits soucis pour centrer un élément...

Sur mon petit écran le texte est parfaitement centrer mais pas quand je met chrome sur le grand écran.

Au niveau de la ptoho j'aimerai qu'elle soit alignée verticalement avec mon nom et mon prénom... vertical-align ne fonctionne pas 

Voici les codes : 

<div class="photo_presentation">
    <div class="profil">
      	<a href="image/grandprofil.jpg"><img src="image/miniprofil.jpg" alt="Proto de profil miniature"></a>
    </div>

    <div class="presentation">
      	Je suis nouveau dans le développement web.
      	J'apprend à créer mon portfolio via <a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3" target="blank">OpenClassrooms,</a>
      	Mais aussi via le cours de <a href="http://pierre-giraud.com/" target="blank">Mr Pierre Giraud.</a>
    </div>
</div>

.photo_presentation { /*Photo de profil + Texte de présentation en dessous*/
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 300px;
  width: 100%;
}

.profil { /*Photo de profil seule*/
  width:300px;
  height:300px;
  overflow:hidden;
  border-radius:150px;
  margin-left: 10%;
}

.presentation { /*Texte de présentation seul*/
  text-align: center;
  padding: 20px;
  white-space: pre;
}

Merci pour votre aide.

Salut,

premièrement est-ce que le code est de toi ? Je ne comprends pas pourquoi le texte de presentation, et meme le div qui a comme classe (c'est mieux de mettre des id plutot que des classes avec un div) "presentation", à l'interieur du bloc de la photo :

<div class="photo_presentation">

Sinon est-ce que tu as essayé de mettre une marge à gauche fixe pour les deux éléments ? (Tu ne nous as pas mis le code pour ton nom/prénom)

darosior a écrit:

Salut,

premièrement est-ce que le code est de toi ? 

Bonjour, 

Bien sur j'ai tout coder moi même en suivant des tutoriels.

Pour ce qui est de la class photo_presentation, c'est une DIV qui regroupe deux autres DIV (une div pour l'image, et une autre pour le texte (presentation))

J'ai mis un margin left pour la photo (margin-left: 10%;) et la photo décale en changeant d'écran.

Merci beaucoup pour ton aide.

Voici le code a partir du header.

<header>
    <div class="entete">
        <h1>NOM PRÉNOM<span class="desc">web développeur débutant</span></h1>
    </div>

    <div class="menu">
        <nav class="listemenu">
            <ul>
          	<li>Acceuil</li>
          	<li>Profil</li>
          	<li>Portfolio</li>
          	<li>Contact</li>
           </ul>
      	</nav>
    </div>
</header>

<div id="sectionprincipale">
    <div class="photo_presentation">
    	<div class="profil">
      	    <a href="image/grandprofil.jpg"><img src="image/miniprofil.jpg" alt="Proto de profil miniature"></a>
    	</div>

    <div class="presentation">
      	Je suis nouveau dans le développement web.
      	J'apprend à créer mon portfolio via <a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3" target="blank">OpenClassrooms,</a>
      		Mais aussi via le cours de <a href="http://pierre-giraud.com/" target="blank">Mr Pierre Giraud.</a>
    </div>
</div>

-
Edité par Vanvan271013 26 avril 2017 à 0:56:09

Salut quand je disais margin-left fixe pour les deux éléments c'était aussi pour ton en-tete afin qu'ils aient la meme distance à gauche de l'écran.

Essayes :

.photo_presentation { /*Photo de profil + Texte de présentation en dessous*/
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 300px;
  width: 100%;
  margin-left: 10%;
}
 
.profil { /*Photo de profil seule*/
  width:300px;
  height:300px;
  overflow:hidden;
  border-radius:150px;
  margin-left: 10%;
}
 
.presentation { /*Texte de présentation seul*/
  text-align: center;
  padding: 20px;
  white-space: pre;
}

.entete {
  margin-left: 10%;
}

En ajoutant le code pour la classe en-tête que tu as déjà évidemment