J'ai essayé de résoudre ce problème. Ce que je veux apprendre, c'est connaître différentes manières de centrer les éléments sur la navigation verticalement, en utilisant du HTML sémantique. Je veux mon logo à gauche et la navigation à droite.

J'ai essayé d'utiliser float sur mon élément de navigation mais le logo se cassera et ne sera pas centré verticalement. J'ai utilisé clearfix pour cela, mais je ne trouve toujours pas de moyen de centrer verticalement le logo et la navigation.

Pouvez-vous m'aider s'il-vous-plaît? Et expliquez votre réponse s'il vous plaît? Ensuite, si possible, pouvez-vous me montrer d'autres façons de centrer verticalement le logo (à gauche) et nav (à droite) en utilisant le format exact de mon html?

Voici mon code: https://codepen.io/yortz/pen/pQdKWd

HTML

  <!-- HEADER -->
  <header>
    <!-- LOGO -->
    <a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
    <nav>
      <ul class="clearfix">
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Get in Touch</a></li>  
      </ul>
    </nav>
  </header>

CSS

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
  background-color: #ccc;
}
nav {
  background-color: aqua;
}

/* CENTERING NAVIGATION */
header {
  width: 100%;
}
#site-logo,
  nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}

/* CLEAR FLOATS */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Veuillez aider. Merci!

0
Yortz 20 nov. 2018 à 10:46

6 réponses

Meilleure réponse

J'utiliserais flexbox pour le positionnement dans la navigation

header {
   display: flex;
   justify-content: space-between; // pushes the logo to the left and the nav to the right
   align-items: center; // center aligns children of nav vertically
}

Si vous souhaitez obtenir quelque chose de similaire sans utiliser flexbox, vous pouvez positionner le logo de manière absolue:

header {
  position: relative; // with this all children can be positioned absolutely, relative to the header
  text-align: right; // this aligns the nav to the right of the header
}

header > a {
  position: absolute; // positions the logo absolute, relative to header
  top: 50%; // aligns the logo in the middle of the relative parent
  left: 0; // aligns the logo to the left edge of the relative parent
  transform: translateY(-50%); // changes the coordinates of the logo, to center it vertically (y-axis)
}

nav {
  text-align: left; // just used to reset the text-alignment in the nav elements
}

J'envisagerais d'utiliser une classe au lieu de sélectionner la balise a, par exemple <a class="logo" href="...">...</a> puis header .logo {...} dans le CSS, au lieu de header > a {}. C'est plus à l'épreuve du temps si vous ajoutez plus d'éléments à l'en-tête.

Astuce rapide: si le logo est plus haut que le nav, il débordera du conteneur parent, vous devrez donc modifier la hauteur du parent pour résoudre ce problème. Si vous pouvez garantir que le nav est toujours plus haut que le logo, ce n'est pas un problème pour vous et vous pouvez laisser la hauteur de l'en-tête intacte.

3
Michael 20 nov. 2018 à 08:34

Espérons que cela aidera. J'ai eu quelques changements dans votre lien jsfiddle et collez-le ici. juste des changements css.

    * {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
 width:100%;
  display:block;
}
nav {
}




/* CENTERING NAVIGATION */
header {
    width: 100%;
}
#site-logo{
  display:inline-block;
  vertical-align:middle;
    width:calc(20% - 2px);
}
nav {
  display: inline-block;
  vertical-align: middle;
  position:relative;
  width:calc(80% - 2px);

}
nav ul {
  list-style-type: none;
  padding-left: 0;
  display:inline-block;
  position:relative;
  left:76%;
  background-color: aqua;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
/* CLEAR FLOATS */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
1
vssadineni 20 nov. 2018 à 09:01

Vous devez modifier votre code comme ceci:

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav {
    background-color: aqua;
}
/* CENTERING NAVIGATION */
header {
    width: 100%;
      display: table;
    vertical-align: middle;
}
.logo-wrapper{
  display: table-cell;
    vertical-align: middle;
}
#site-logo{
  display: inline-block;
  vertical-align: middle;
}
nav{
  display: table-cell;
    float: right;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
/* CLEAR FLOATS */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Et puis modifiez la balise d'ancrage HTML comme ceci:

<a href="#" class="logo-wrapper"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
1
Sagar B 20 nov. 2018 à 09:08

Beaucoup de réponses déjà. C'est à moi. Je mets le logo dans le <ul> en tant qu'élément li. Je fais du <ul> un conteneur flex et le plus important: margin:auto à droite pour le premier élément de la liste.

nav ul li:first-child {
 margin:0 auto 0 0
}
* {
  box-sizing: border-box;
}




/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav ul {
	background-color: aqua;
  display:flex; 
}
nav ul li a{height:47px;}


/* CENTERING NAVIGATION */
header {
	width: 100%;
}
#site-logo,
nav {
  
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li:first-child {
 margin:0 auto 0 0
}
nav ul li a {
  border: 1px solid red;
  padding: 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
nav ul li:first-child a{padding:10px} 



/* CLEAR FLOATS */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        
        <nav>
          <ul class="clearfix">
            <li><a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
      </header>
1
enxaneta 20 nov. 2018 à 10:00

Si vous souhaitez centrer les éléments verticalement, vous pouvez utiliser align-content avec display: flex.

1
Jerico Lawrence Roque 20 nov. 2018 à 07:56

Utiliser float left et right et donner padding au logo pour l'alignement vertical au centre

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
.logo{
  float:left;
}
.logo img{
  padding:24px 10px;
}
nav {
	background-color: aqua;
  float:right;
}

.clearfix{
  clear:both;
}

/* CENTERING NAVIGATION */
header {
	width: 100%;
}
#site-logo,
nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}




/* CLEAR FLOATS */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <a href="#" class="logo"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
        <nav>
          <ul class="clearfix">
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
        <div class="clearfix"></div>
      </header>
1
Hiren Vaghasiya 20 nov. 2018 à 07:54