html - 如何在内容较高的跨度旁边的跨度中垂直居中文本？

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>

自定义.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列布局

Answer 2

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

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

</li>

在 CSS 上：

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

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