div内的垂直对齐链接答案

【问题标题】：vertical align link inside divdiv内的垂直对齐链接
【发布时间】：2014-03-03 21:36:08
【问题描述】：

我创建了一些浮动按钮和一个填充整个按钮的链接。但是，垂直对齐似乎并不适用 - 链接文本始终位于按钮 <li> 的顶部。

<div id="ButtonContainer">
    <ul>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Contact Us</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Enter Project</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Request Consultation</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">How to Protect Yourself From Some Really Long Text</a></div>
        </li>
    </ul>
</div>

    ul {
        list-style-type: none;
    }
    /* BUTTONS INSIDE TAB STYLING */

    #ButtonContainer {
        margin: auto;
        width: 100%;
        overflow: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #ButtonContainer > ul {
            padding: 0;
            margin: 0;
    }

    #ButtonContainer > ul > li {
        display: inline-block;
        vertical-align: bottom;
    }

    .TemplateButton {
        overflow: auto;
        vertical-align: bottom;
    }

    .TemplateButton > a {
        width: 119px;
        height: 119px;
        padding: 15px;
        float: left;
        background-color: pink;
        margin-left: 3px;
        margin-right: 3px;
        vertical-align: bottom;
        text-align: center;
        font-size: 1.25em;
        border: 1px solid white;
        border-radius: 15px;
        -moz-border-radius: 15px;
    }

【问题讨论】：

如果这些按钮中有一个单词或单行文本，您可以使用line-height:119px; 轻松对齐它们。但是由于它是多行的，因此更加困难。看看这个链接：css-tricks.com/vertically-center-multi-lined-text

标签： html css vertical-alignment

【解决方案1】：

在您的a 标签中使用table-cell 而不是float 并将vertical-align 更改为middle：

.TemplateButton > a {
  /*float: left; Remove this*/
  display:table-cell;    /*Add this*/
  vertical-align:middle; /*Change to middle*/
}

检查这个Demo Fiddle

【讨论】：

浮动完全没有意义，不知道它为什么在那里。不知道它胜过这样的显示，很高兴知道。谢谢。
@user3280943 np mate 很高兴为您提供帮助

【解决方案2】：

将锚点的line-height 设置为DIV 的display: block，否则您的宽度/高度值将不起作用

【讨论】：

还不能投票。但我会投票给 helion3 的答案。显示：表格单元格；总是给我带来麻烦。它还将链接的大小锁定为父元素的大小，这可能会很痛苦。