Question

你可能会看到很多这个问题。但是，我已经通过线程，我似乎无法找到解决我的情况。这可能是我失踪的一小部分，或者也许我只是一起吠叫错误的树。

基本上我要做的是用一个带有{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找到一个样本，随时可以浏览该网站，它仍然是一项正在进行的工作，必须对其进行组织和重新编码。无论如何，该样本正是我想要的，只需要将文本垂直对齐。

Answer 1

如果你设置包含框的行高（你的锚 - 只是抛弃内部div，你不需要它）等于它的高度，那么单行的文本将垂直居中。如果你需要换行，它会变得更复杂。

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

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

Answer 2

<div>内不能有<a>，这是无效的HTML。请改为使用<span>设置为display: block;。

更新：

从HTML5开始，你现在可以在一个锚（或任何块级元素）中有一个div。

虽然这是合法的，但您必须使用HTML5 doctype：

<!DOCTYPE html>

Answer 3

这通常对我有用

＆＃13;

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

＆＃13;

*{
    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;
}

＆＃13;

<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>

＆＃13;

以为我应该把它放在那里：）

仅当链接容器为 display：flex

时才有效

垂直对齐的锚文本？

3 个答案: