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>

如果你也想要垂直居中,那么有很多技巧 – 最快和最脏的方法是在li元素上添加一些padding-top,或者设置一个与整个元素的高度相匹配的line-height .

但是,针对这种特殊设计的更清洁的解决方案可能是切换到flexBox;代码有点简单,它解决了当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>