垂直对齐的锚文本？答案

【问题标题】：Vertically aligned anchor text?垂直对齐的锚文本？
【发布时间】：2011-12-10 09:10:14
【问题描述】：

你可能经常看到这个问题。但是，我已经通过线程，我似乎无法找到解决我的情况的方法。这可能是我错过了一些非常微小的事情，或者我只是一起吠叫了错误的树。

基本上，我要做的是使用具有设定高度和宽度的 {display:block;} 的锚点，并使其文本垂直和水平居中。

现在这是我的 CSS

.logo
{
    width:140px;
    height:75px;
    border-right:1px dotted black;
    border-bottom:1px dotted black;
    float:left;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}

.logo a
{
    display:block;
    width:140px;
    height:75px;
    background-color:#fff;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}
/*the reason for the double declaration of text information is because
  some of the logo divs do not have anchors in them, and it's for uniformity
  purposes.
*/

.logo a div
{
    margin-top:10px;
}

然后html就是

<div class="logo"><a href="#"><div>my link</div></a></div>

现在我在锚点内插入一个 div 的原因是因为我认为这是将文本与实际块分开的好方法，但是通过设置边距，它会向下移动锚点，而不仅仅是文本。 vertical-align 属性基本上什么都不做，我不知道该怎么做。任何建议或重组想法都会很棒。谢谢。

可以在http://www.dsi-usa.com/test/clientele.php 找到一个示例，请随意浏览该站点。它仍在进行中，很多内容需要组织和重新编码。无论如何，该示例正是我想要的，只需要将文本也垂直对齐即可。

【问题讨论】：

锚点内不能有 div，这是无效的 HTML。使用设置显示：块；而是。
感谢您提供的信息，我会记录下来。起初它没有用，但是通过将 a 的位置更改为 relative，然后将 span 的位置更改为 fixed，我可以搞砸它直到它被修复，非常感谢您提供的信息。
不用担心，如果有帮助，我会将其粘贴到答案中，您可以接受并投票 :)

标签： css vertical-alignment

【解决方案1】：

如果您将包含框的行高（您的锚 - 只需丢弃内部 div，您不需要它）等于它的高度，那么单行文本将垂直居中。如果你需要换行，那就更复杂了。

这里只有一个锚元素来演示更简单的场景：http://jsfiddle.net/vdkAb/1/

更新
...如果你不需要担心 IE6/7 支持（你很幸运！），那么你可以使用 display:table-cell，它可以毫不费力地工作——无需指定行高——即使有多行，像这样：http://jsfiddle.net/PH5Yw/

【讨论】：

谢谢浮士德，这是一个很好的解决方案......但是当我进入办公室时，我的老板决定他想放弃这个想法并将所有内容放入无序列表哈哈。美好时光。

【解决方案2】：

<div> 不能包含在 <a> 中，这是无效的 HTML。改用 <span> 设置为 display: block;。

更新：

从 HTML5 开始，您现在可以在锚点（或任何块级元素）中包含 div。

为了合法，您必须使用 HTML5 文档类型：

<!DOCTYPE html>

【讨论】：

抱歉 kyle 试图投票，但我的声望还不到 15
这实际上并没有提供解决方案。

【解决方案3】：

这通常对我有用

$(function(){
    
    $("button").click(function(){
        $(".navbar").toggleClass("large");
    });
    
});

*{
    box-sizing: border-box;
}

.navbar{
    display: flex;
    color: white;
    background: black;
    height: 30px;
    margin-bottom: 10px;
    transition: all 0.25s ease;
}

.navbar.large{
    height: 120px;
}

a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
    padding: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a>TITLE</a>
    <a>Contact</a>
    <a>About Us</a>
</div>
<button>Change Nav Size</button>

只是觉得我应该把它放在那里:)

仅当链接容器为 display: flex

时有效

【讨论】：