<li>要素の中央揃えのテキスト

Question

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>

上記のコードを使用して、<header>と<image>を含む<navigation>を作成しました。これはすべてこれまでのところうまくいきます。

これで、<li>要素内のtextがcenterに表示されるようになりました。そのため、text-align: center;のプロパティli CSSを使用しようとしましたが、機能しませんでした。

<li>要素centered内でtextを取得するには、コードを変更する必要がありますか？

ここで私のコードを見つけることもできます： https://jsfiddle.net/5jv8m5xf/39/

Answer 1

text-align:centerはテキストを中央揃えにしますが、li要素に特定の幅を設定する必要があります。それ以外の場合は、それぞれがテキスト自体の幅に折りたたまれるため、センタリングは表示されません。

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>

垂直方向のセンタリングも必要な場合は、多くのテクニックがあります。最も速くて汚いのは、padding-topをli要素に設定するか、line-heightは、要素全体の高さに一致します。

しかし、この特定の設計のためのよりクリーンなソリューションは、おそらくフレックスボックスに切り替えることでしょう。コードは少しシンプルで、li内のテキストが複数行にまたがるときに発生するレイアウトの問題を解決します。

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

Answer 2

関連する_text-align: center_のliにwidthを設定します。

psuedo要素を使用して要素を垂直に整列する1つの方法-liとthisに_vertical-align: middle_を追加するpsuedoafter要素をcssに：

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

以下のデモをご覧ください：

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

flexboxが_display: inline-flex_を使用できるオプションである場合、justify-content: center_をhorizo​​ntalおよび_align-items: center_は、verticalアライメント用です。

以下のデモをご覧ください：

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