如何将文本垂直居中在跨度较高的跨度旁边？

Question

我有一个页脚，左边是链接的名称，右边是一个用css制作的导航按钮。

以下是影响此页脚的代码：

布局/ _footer.html.erb

<li>
  <a href="http://www.bruxzir.com/" title="http://www.bruxzir.com/">
    <span>HOME</span><span>&raquo;</span>
  </a>
</li>

custom.css

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  #footer { text-align: left; }
  #footer ul li { 
    display: block; 
    padding: 12px; 
  }
  #footer ul li a { } 
  #footer ul li a span:nth-of-type(2) {
    padding:9px;
    background-color: rgb(202, 0,0 );
    float: right;
    border-radius:2px;
  }
  #footer div.inner p {margin-left: 12px;}
}  

@media only screen and (min-width: 480px) { 
  #footer { text-align: center; }
  #footer ul li { display: inline; }
  #footer ul li:not(:last-of-type) { margin-right: 12px }
  #footer ul li a span:nth-of-type(2) { display: none; }
}

如您所见，我通过在第二个范围的<a>中添加填充来创建按钮。所以我尝试在左边的文本中添加相等的填充，但是填充和边距都没有移动它。

Answer 1

将display: table*用于相同高度的“单元格”（它只是可视的，与HTML表格布局无关）：

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  #footer { text-align: left; }
  #footer ul li { 
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 12px; 
  }
  #footer ul li a span {
    display: table-cell;
    vertical-align: middle;
  } 
  #footer ul li a span:nth-of-type(2) {
    width: 10px; /* 28 = 10 + 2*9 if you aren't using box-sizing: border-box (you should, so much simple) */
    padding:9px;
    background-color: rgb(202, 0,0 );
    border-radius:2px;
  }
  #footer div.inner p {margin-left: 12px;}
}  

@media only screen and (min-width: 480px) { 
  #footer { text-align: center; }
  #footer ul li { display: inline; }
  #footer ul li:not(:last-of-type) { margin-right: 12px }
  #footer ul li a span:nth-of-type(2) { display: none; }
}

我之前就此主题做了相关答案：2 columns layout

Answer 2

尝试在li元素上设置类标识符，然后使用该标识符通过css修改它，例如：

<li class="footer">
    <!-- footer code goes here -->

</li>

关于css：

li .footer{
  /* Set margin here */
}

此外，您可以将页脚放在列表之外并执行相同的操作，以避免将css作为列表的一部分应用于其中，并且可以更简单地访问css。