Question

我正在创建一组标签 - 我需要遵循各种规则 - 其中一条规则是允许在锚文本上换行。我目前的解决方案是使用table-cell来实现我的需求：

enter image description here

正如您所看到的，这很有效。选项卡水平居中，文本垂直居中，但仍有一个问题需要解决。黄色区域表示锚点，红色表示LI（表格单元格）。我需要的是锚点填充其父级中可用的空间，同时保持文本垂直对齐 - 换句话说，整个事物应该是黄色的。

这是我到目前为止的代码：

＆＃13;

   ul.fixed-tabs 
    {
        display: table;
        table-layout:fixed;
        margin:0 auto;
    }
    
    ul.fixed-tabs li
    {
        display:table-cell;
        min-width:16rem;
        max-width:26.4rem;
        width:50%;
    
        height:4.8rem;
        vertical-align:middle;
    }
    
    ul.fixed-tabs li a
    {
        display:block;
        text-align:center;
    }

＆＃13;

<div class="content-tabs">
  <ul class="fixed-tabs text-tabs two-up">
    <li href="#"><a>Terms of Use</a></li>
    <li><a href="#">Privacy Policy long longer longest</a></li>
  </ul>
</div>

＆＃13;

更新

这是使用BaTmaN小提琴的最新输出。

enter image description here

Answer 1

尝试

With objMessage 
    .From     = RS("Email_from")
    .To       = RS("Email_to")
    .Subject  = "Alert div"
    .HtmlBody = msg
    .Fields("urn:schemas:httpmail:importance").Value = 2 
    .Fields("urn:schemas:mailheader:X-MSMail-Priority") = 6
    .Fields.Update()    

on error resume next
   .Send
    if Err.Number <> 0 then
       response.Write "Email send failed # : " & Err.Number & " -  " & Err.Description & ".<br />"&vbcrlf
    end if  

End With

或您需要的适当填充

Answer 2

添加height :100%。现在锚中的所有东西都是黄色的。

 ul.fixed-tabs li a
{
  height:100%;
    display:block;
    text-align:center;
  background:yellow;
}

为了演示，我添加了截图。黄色和非链接的链接为红色。

enter image description here

http://jsbin.com/nomipavojo/2/edit

使文本垂直居中。另外在您的line-height:80px; css

中添加ul.fixed-tabs li a

通过添加vertical-align，table-cell和height属性，文本垂直对齐。

ul.fixed-tabs li a
{
 height:4.8rem;
   width:26.4rem;
  text-align:center;
  background:yellow;
  display: table-cell;
    vertical-align: middle;
}

http://jsbin.com/guqahufavi/3/edit

enter image description here

px中的宽度而不是rem。

ul.fixed-tabs li
{
    display:table-cell;
    min-width:160px;
    max-width:264px;
    height:4.8rem;
  width:50%;
    vertical-align:middle;
  background :red;
  border-right:1px solid #ddd;
}

ul.fixed-tabs li a
{
  height:4.8rem;
  min-width:264px;
  max-width:264px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  background:yellow;
}

http://jsbin.com/nuqiderado/2/edit

enter image description here

在填充空间的同时垂直居中文本

2 个答案: