web-dev-qa-db-fra.com

centre d'alignement du texte dans l'élément <li>

body {
 margin: 0;
}

.header {
    width: 80%;
    height: 20%;
    margin-left: 10%; 
    position: fixed;
    top: 0; 
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.image {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

.navigation {
    width: 79%;
    height: 100%;
    float: right;
    text-align: right;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

ul {
    height: 100%;
    font-size: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
}

li {
    height: 100%;
    font-size: initial;
    display: inline-block;
    box-sizing: border-box;
        border-style: solid;
        border-width: 1px;
    background-color: blue;
}
<div class="header">  

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
        <ul>
          <li> 1.0 Main Menu </li>
          <li> 2.0 Main Menu </li>
          <li> 3.0 Main Menu </li>
        </ul>
      </nav>
      
</div>

Avec le code ci-dessus, j'ai créé un <header> Contenant un <image> Et un <navigation>. Tout cela fonctionne bien jusqu'à présent.

Maintenant, je veux que le texte à l'intérieur de l'élément <li> Apparaisse au centre . Par conséquent, j'ai essayé d'utiliser la propriété text-align: center; Dans le li CSS Mais cela n'a pas fonctionné.

Que dois-je changer dans mon code pour que le texte dans les éléments <li> soit centré ?

Vous pouvez également trouver mon code ici: https://jsfiddle.net/5jv8m5xf/39/

htmlcssvertical-alignmentcentering
9
Michi

text-align:center centre le texte - mais vous devez définir une largeur spécifique pour les éléments li; sinon, chacun d'eux se réduit à la largeur du texte lui-même, de sorte que le centrage n'est pas visible.

li {
  width: 100px; 
  text-align:center;
}
/* Everything below is the same as your original code */
body {
 margin: 0;
}

.header {
    width: 80%;
    height: 20%;
    margin-left: 10%; 
    position: fixed;
    top: 0; 
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.image {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

.navigation {
    width: 79%;
    height: 100%;
    float: right;
    text-align: right;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

ul {
    height: 100%;
    font-size: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
}

li {
    height: 100%;
    font-size: initial;
    display: inline-block;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue; 
}
<div class="header">  

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
        <ul>
          <li> Longer text</li>
          <li> Short </li>
          <li> X </li>
        </ul>
      </nav>
      
</div>

Si vous voulez également un centrage vertical, il existe un tas de techniques - la plus rapide et la plus sale serait soit d'ajouter padding-top aux éléments li, ou définissez un line-height qui correspond à la hauteur de l'élément dans son ensemble.

Mais une solution plus propre pour cette conception particulière serait probablement de passer à la flexbox; le code est un peu plus simple et résout les problèmes de mise en page qui se produisent lorsque le texte dans un li passe sur plusieurs lignes:

.header {
  background-color: yellow;
  display: flex;
  justify-content: space-between; /* Puts the image at far left, nav at far right */
}

.image {
  width: 100px;
  background-color: green
}

ul {
  display: flex; /* Puts the `li` in a row */
  list-style: none; margin: 0; padding: 0;
  background-color: blue;
  height: 100px;
}

li {
  border: 1px solid;
  width: 100px; /* Alternatively, you could set a specific width on the ul, and use flex-grow:1 here to make all the li elements the same width */
  display: flex; /* allows align-items to work below */
  justify-content: center; /* Horizontally centers single-line elements */
  text-align:center; /* Horizontally centers text within line-wrapped elements */
  align-items: center; /* vertical */
}
<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li>Very long text with line wrapping</li>
      <li>Short</li>
      <li>X</li>
    </ul>
  </nav>
</div>
12
Daniel Beck

Définissez une largeur sur li pour text-align: center pour être pertinent.

Une méthode d'alignement vertical des éléments à l'aide d'un élément psuedo - ajoutez vertical-align: middle à votre li et ce psuedo after élément à votre css:

li:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

Voir la démo ci-dessous:

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  font-size: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

li {
  height: 100%;
  font-size: initial;
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  text-align: center;
  vertical-align: middle;
}

li:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li> 1.0 Main Menu </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

Si flexbox est une option, vous pouvez utiliser display: inline-flex, les choses peuvent être aussi simples que d'ajouter justify-content: center pour horizontal et align-items: center pour alignement vertical .

Voir la démo ci-dessous:

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  font-size: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

li {
  height: 100%;
  font-size: initial;
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  /*ADDED THESE*/
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li> 1.0 Main Menu </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>
3
kukkuz