Centrer un titre

Lucas Aubertin
Les bases HTML/CSS

Bonjour,

Je fais appel à vous car j'ai un projet avec mon école. Je dois créer un site web pour me présenter sur Internet. J'ai donc commencé à créer un "prototype". Cependant, dans ma barre de navigation, je n'arrive pas à centrer le titre. Il est forcément "toujours un peu sur la droite", ce qui est certainement dû à l'image à droite, mais je ne sais pas quoi faire...
Le code :
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <!-- Lien vers le fichier CSS externe -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- En-tête avec le nom et la navigation -->
    <header>
        <div class="header-content">
            <img src="https://www.univ-reims.fr/iut-rcc/media-images/49468/iut-1.png" alt="Logo IUT Léonard Devinci">
        <h1>Lucas Aubertin - Portfolio</h1>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="formations.html">Formations</a></li>
                <li><a href="etudes.html">Études</a></li>
            </ul>
        </nav>
    </header>

    <!-- Section principale d'accueil -->
    <main>
        <section id="intro">
            <h2>Bonjour !</h2>
            <p>Je suis étudiant en BUT Réseaux et Télécommunications (R&T) en France.</p>
            <p>Bienvenue sur mon site web personnel où je vous invite à découvrir mon parcours, mes formations et mes projets académiques.</p>
        </section>

        <section id="cta">
            <h3>Découvrez mon parcours</h3>
            <p>Explorez les différentes sections pour en apprendre davantage sur mes études et mes compétences en R&T.</p>
            <a href="formations.html" class="button">En savoir plus</a>
            <iframe width="90%" height="600" allowfullscreen frameborder="0" src="mon_lien.exemple"></iframe>
        </section>
    </main>

    <!-- Pied de page -->
    <footer>
        <p>&copy;2024 Lucas Aubertin - Portfolio</p>
        <p>Contact : <a href="mailto:mailexample@gmail.com">mailexample@gmail.com@example.com</a></p>
    </footer>
</body>
</html>

/* Reset de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Style global */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/* En-tête */
header {
    background-color: #4CAF50;
    color: #fff;
    padding: 1em 0;
}

/* Conteneur pour le logo et le titre */
.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Logo aligné à gauche */
.logo {
    margin-right: auto; /* Colle le logo à gauche */
    width: 50px; /* Taille du logo, peut être ajustée */
    height: auto;
}

/* Titre de l'en-tête */
header h1 {
    font-size: 2em;
    text-align: center;
    flex: 1; /* Permet au titre de rester centré */
}

/* Navigation */
nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px; /* Un léger espacement entre le menu et le titre/logo */
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

/* Animation de soulignement sur les liens */
nav ul li a, footer a {
    color: #fff;
    text-decoration: none;
    position: relative;
}

/* Pseudo-élément pour l'animation de soulignement */
nav ul li a::after, footer a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Place le soulignement sous le texte */
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

nav ul li a:hover::after, footer a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Section principale */
main {
    flex: 1;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#intro h2 {
    font-size: 1.8em;
    color: #333;
}

#cta {
    margin-top: 20px;
    text-align: center;
}

#cta .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    color: #fff;
    background-color: #4CAF50;
    border-radius: 5px;
    text-decoration: none;
}

#cta .button:hover {
    background-color: #45a049;
}

#cta iframe {
    border: solid 1px black;
    margin-top: 10px;
}

/* Pied de page */
footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
    margin-top: auto;
}

footer a {
    color: #fff;
    text-decoration: none;
}

2 réponses

JRcode

Bonjour,

Attention car ta class "logo" ne s'applique à rien dans ton html, j'imagine que c'était prévu pour ta balise img.

Une fois réglé ça tu peux régler ton problème en utilisant un absolute (j'ai augmenté la taille à 200px pour garder ton rendu initial) :

/* Logo aligné à gauche */
.logo {
    margin-right: auto; /* Colle le logo à gauche */
    width: 200px; /* Taille du logo, peut être ajustée */
    height: auto;
}

/* Titre de l'en-tête */
header h1 {
    font-size: 2em;
    position: absolute;
}
Smith john

Salut, tu peux le faire comme ça aussi si tu veux.

// Modification du header 

<!-- En-tête avec le nom et la navigation -->
     <header>
      <img
        src="https://www.univ-reims.fr/iut-rcc/media-images/49468/iut-1.png"
        alt="Logo IUT Léonard Devinci"
      />
      <div class="header-content">
        <h1>Lucas Aubertin - Portfolio</h1>
        <nav>
          <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="formations.html">Formations</a></li>
            <li><a href="etudes.html">Études</a></li>
          </ul>
        </nav>
      </div>
    </header>

// CSS (pas besoin de class logo)

  /* En-tête */
  header {
    background-color: #4caf50;
    color: #fff;
    padding: 1em 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  /* Conteneur pour le logo et le titre */
  .header-content {
    grid-column: span 2;
    grid-row: span 2;
    text-align: center; <== sert a centrer tout ton texte dans le conteneur
  }

  /* Titre de l'en-tête */
  header h1 {
    font-size: 2em;
  }

  /* Navigation */
  nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px; /* Un léger espacement entre le menu et le titre/logo */
  }