text-align-center in <li> - element

CSS:

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;
}

HTML:

<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>

Mit dem obigen code habe ich eine <header> mit einer <image> und ein <navigation>. All dies funktioniert gut so weit.

Nun möchte ich, dass die text innerhalb der <li> element wird in der center. Deshalb habe ich versucht, zu gehen, mit der Eigenschaft text-align: center; im li CSS aber es hat nicht funktioniert.

Was muss ich ändern in meinem code, um die text innerhalb der <li> Elemente zentriert?

Finden Sie auch meinen code hier: https://jsfiddle.net/5jv8m5xf/39/

  • Haben Sie versuchen, hinzufügen von "text-align: center" auf Ihrem "<ul>" - element?
  • Ja, aber es stellt den <li> Elemente in der Mitte. Nicht der text innerhalb der <li> - Elemente.
  • Sie möchten die vertikale Ausrichtung des Textes?
  • stackoverflow.com/questions/33049010/how-to-center-text-in-li
  • Ich habe versucht, verwenden Sie die text-aling:center und seine Werke. Ich war nicht in der Lage, um den Effekt zu sehen, weil der <li> die Breite ist so klein, wenn Sie erhöhen es vielleicht Sie sehen werden.
InformationsquelleAutor Michi | 2017-08-20
  1. 10

    text-align:center tut-center-der text-aber Sie haben, um eine bestimmte Breite für die li Elemente; andernfalls jedem von Ihnen bricht einfach zusammen, um die Breite des Textes selbst, also die Zentrierung ist nicht sichtbar.

    CSS:

    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; 
}

    HTML:

    <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>

    Wenn Sie möchten vertikale Zentrierung wie gut, gibt es eine Reihe von Techniken-die Schnellste und schmutzigste wäre, entweder fügen Sie einige padding-top zu den li Elementen, oder setzen Sie einen line-height entspricht die Höhe des Elements als ganzes.

    Aber eine saubere Lösung für dieses design würde wahrscheinlich wechseln zu flexbox; der code ist ein wenig einfacher und es löst die layout-Probleme, die auftreten, wenn der text in einer li Packungen über mehrere Zeilen:

    CSS:

    .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 */
}

    HTML:

    <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>

    • Hi Daniel, danke für deine Antwort. Es scheint zu funktionieren nur für vertical-align. Was muss ich ändern, um auch damit es funktioniert horizontal?
    • Jetzt wird der text horizontal zentriert aber nicht vertikal. Es gibt eine Anzahl von unterschiedlichen Techniken für die vertikale Zentrierung, die erfordern würde, dass die wenigsten änderungen zu Ihren bestehenden code wäre entweder fügen Sie einige padding-top zu den li Elementen, oder setzen Sie einen line-height entspricht die Höhe des Elements selbst.
    • Aber beide sind ein bisschen hacky. Ehrlich gesagt, wenn ich waren mit dem Ziel für dieses design würde ich von vorne anfangen und tun es in flexbox, es sei denn, Sie benötigen, um veraltete Browser. Gib mir eine Sekunde und ich werde werfen zusammen ein Beispiel.
    • Hi Daniel, sorry. Ja ich meinte vertcially. Ich habe versucht, die line-height. Das bringt mich zu meinem Ziel aber ich denke, eine flexbox-Lösung könnte sein, ein weiterer moderner Ansatz, um es. Freuen uns auf dein Beispiel.
    • aktualisiert. Ich eine bestimmte Breite auf der li Elemente in der flexbox-version zu; je nach Ihren design-Sie könnten alternativ legen Sie eine Breite für die ul statt und verwenden flex-grow:1 auf die li zu lassen, Ihnen Ihre eigenen gleichen Größen in diesem Bereich.
    • Brilliante Lösung. Vielen Dank für Eure Hilfe. Ich habe auch aktualisiert es hier: jsfiddle.net/vu0hnqab/1
    • Vielleicht haben Sie auch eine Lösung für dieses: stackoverflow.com/questions/45796019/...

    InformationsquelleAutor Daniel Beck
  2. 3

    Legen Sie eine Breite der li für text-align: center relevant.

    Eine Methode zum ausrichten von Elementen vertikal Verwendung eines Pseudo elment - add vertical-align: middle zu Ihrem li und diese Pseudo after element, um Ihre css:

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

    Siehe demo unter:

    CSS:

    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;
}

    HTML:

    <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>

    Wenn flexbox ist eine option, die Sie verwenden können display: inline-flex, Dinge können so einfach sein wie das hinzufügen justify-content: center für horizontale und align-items: center für vertikale Ausrichtung.

    Siehe demo unter:

    CSS:

    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;
}

    HTML:

    <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>

    InformationsquelleAutor kukkuz
Schreibe einen Kommentar