Question

为什么垂直对齐在我要对齐的元素上不起作用？但是，如果我将其周围的其他元素对齐，该方法是否有效？

我读过几篇有关垂直对齐的文章，其中指出它是为了对齐表或内联元素而创建的。因此，我在代码中将所有元素都设置为inline-block。

当我尝试垂直对齐菜单链接时，它没有任何作用。如果我尝试将1个框与菜单链接的左侧或右侧对齐，则会向下推菜单。

但是如果我一次垂直对齐两个框，则文本会对齐。

这是怎么回事，我应该如何使用垂直对齐方式？还是我不应该再使用它？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexPractice</title>
    <link rel="stylesheet" href="practiceflex.css">
</head>
<body>        
    <nav class="container">
        <div class="logo">
            <div class="box" id="box1"> </div>    
        </div>

        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Our mission</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Leave a comment</a></li>
            </ul>
        </div>

        <div class="profilepic">
            <div class="box" id="box2"> </div>    
        </div>                        
    </nav>        
</body>
</html>

html,body{
    padding:0px;
    margin:0px;
}
.box{
  width: 48px;
    height:50px;
    background: red;
}

.menu > ul > li{        
    text-decoration: none;
    display:inline;
    margin-right:20px;
}

.container
{
    display:inline-block;
/*    vertical-align: middle;*/
}

.container * {
    display:inline-block;
/*    vertical-align: middle;*/
}    

/*
#box1{
    vertical-align: middle;
}    

#box2{
    vertical-align: middle;
}*/

https://jsfiddle.net/curiousproger/gurmL8f9/

Answer 1

请参阅MDN docs vertical-align。实际上，一种用例适用于表格单元，另一种用例如MDN所述：

要在其包含的行框 （强调我的内容）
中垂直对齐内联元素的框

这意味着两件事：

vertical-align仅影响带有display: inline或display: inline-block的元素
父级和所有子级的line-height属性可能会极大地影响所涉及的所有元素的对齐方式。

由于嵌套的级别更高，所以行高对于文本对齐和换行很重要，vertical-align最适用于内联内容，例如段落文本，图像，图标，脚注引用等。对于垂直居中的块级元素（例如导航），在父元素上使用display: flex; align-items: center;会更安全

为了说明潜在问题，我在下面提供了一些测试用例。

[id^="case"] { border: 1px solid; height: 50px; }
code { display: inline-block; }
.box {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: red;
  vertical-align: middle;
}

#case-2, #case-3 {
  line-height: 50px;
}
#case-3 code {
  line-height: 100px;
  vertical-align: middle;
}
#case-3 .box {
  line-height: 20px;
  vertical-align: middle;
}

<h2>vertical-align tests</h2>
<div id="case-1">
  <span class="box"></span>
  <code>#case-1</code>
  <span class="box"></span>
</div>
<div id="case-2">
  <span class="box"></span>
  <code>#case-2</code>
  <span class="box"></span>
</div>
<div id="case-3" style="line-height: 0;">
  <span class="box"></span>
  <code>#case-3</code>
  <span class="box"></span>
</div>
<h2>Flexbox</h2>
<div id="case-4" style="display: flex; align-items: center;">
  <span class="box"></span>
  <code>#case-3</code>
  <span class="box"></span>
</div>

Answer 2

垂直对齐方式默认设置（即，如果您未定义其他设置）为baseline，它是元素内最后一行文本的基线。如果没有文字，则改为底部边框。

在这种提琴形式中，第一个框（无文本）的底部边框与文本元素的基线对齐，在另一个框（现在包含文本）中，最后一个文本行与其他文本元素对齐：

https://jsfiddle.net/x3q0v5ab/

注意：我没有更改CSS，只在第二个块中放入了一些文本。

因此，如果您使用baseline以外的垂直对齐设置，请在两个块上都使用相同的设置。

为什么在此特定示例中垂直对齐不起作用

2 个答案: