为什么垂直对齐在此特定示例中不起作用？
为什么垂直对齐在我试图对齐的元素上不起作用？但如果我对齐了它周围的其他元素就行了？
我读过很少关于垂直对齐的文章，这些文章指出它是为对齐表或内联元素而创建的。因此，我在代码中将所有元素设置为内联块。
当我尝试垂直对齐菜单链接时，它几乎什么也不做.如果我试图使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;
}*/回答 2
Stack Overflow用户
发布于 2019-03-22 22:16:13
垂直对齐默认设置(即，如果您不定义任何其他设置)是baseline，它是元素中最后一行文本的基线。如果没有文本，则改为底部边框。
在小提琴的这种变体中，第一个框(没有文本)通过其底部边框与文本元素的基线对齐，在另一个框(现在包含文本)中，最后一个文本行与其他文本元素对齐：
https://jsfiddle.net/x3q0v5ab/
注意:我没有更改CSS，我只在第二个块中放了一些文本。
因此，如果使用baseline以外的垂直对齐设置，则在两个块上使用相同的设置。
Stack Overflow用户
发布于 2019-03-22 22:41:43
请参阅MDN文档垂直对齐。一个用例确实适用于表单元格，另一个用例是，如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>
https://stackoverflow.com/questions/55308310
复制相似问题
腾讯云开发者
