问题会在相应的SVG页脚上的菜单中水平对齐文本

Question

我不能水平对齐这些不是链接而是信息的信息...我想将其与右下角的纯净度对齐

我在Internet上建立的所有示例都带有链接示例，但似乎我缺少了一些东西，而且我对html css还是很陌生。如果我问一个愚蠢的问题，对不起...

footer {
  position:fixed;
  bottom:0px;
  left:0;
  height: 77px;
  width: 100%;
  margin: auto;
  font: 30px "Elastik-B";
  z-index:99;

}

.footer ul{
    display:block;
    text-align:center;
    list-style-type: none;   
}


.footer li {
   position:absolute;
   margin: 20%;
   padding:5px;
   display: inline-block;
   bottom:15px;
   right:5%;

<footer>
<div class="footer">


<ul>
    <li><div id="humidity">15%</div></li>
    <li><div id="temp">15°</div></li>
    <li><div id="clock">15h15m15s</div></li>
    <li><div id="date" class="date">15.15.15</div></li>
  </ul>




    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1670 97" preserveAspectRatio="none">
<g>
    <path fill="#FE4A11" d="M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
        c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
    <path fill="#FE4A11" d="M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
        c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
</g>
</svg>

</div>
</footer>