html - chrome 和 moz 中的垂直对齐问题

Question

我唯一的问题是我想把菜单放在 div 的中间，然后我尝试插入垂直对齐，因为它已经具有 inline-block 样式属性，但老实说我不知道​​为什么。为什么另一个div是生效的，而不是我想生效的。

这是我的例子:

.content{

	width: 100%;
	height: 90%;
}

.middle{

	position: fixed;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.menu{

	width: 70%;
	height: 80%;
}

.three {

	width: 30%;
}


.six{

	width: 60%;
}

.inline {
	display: inline-block;
}

.h-80{

	height: 80%;
}

.h-100{

	height: 100%;
}

<div class="content middle">
	
	<div class="menu">
		<div class="three inline h-80">
			this is taking effect
		</div>
		<div class="six inline h-100"  style="vertical-align: middle;">
			while I inputing vertical align here
		</div>
	</div>
</div>

您可以运行代码片段来检查我的问题的真实性，哦，我尝试了 chrome 和 moz，两者都显示相同的结果。虽然我是菜鸟，但我知道发生了什么，直到尝试了 3 个小时..

Answer 1

vertical-align 是一个奇怪的 CSS 属性。我在 .inline 元素周围添加了边框以显示效果。

第二个 div 与父容器的基线居中对齐。第一个隐含了 vertical-align: baseline 并且它坚持了这一点。

.content{

	width: 100%;
	height: 90%;
}

.middle{

	position: fixed;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.menu{

	width: 70%;
	height: 80%;
}

.three {

	width: 30%;
}


.six{

	width: 60%;
}

.inline {
	display: inline-block;
  border: 1px solid;
}

.h-80{

	height: 80%;
}

.h-100{

	height: 100%;
}

<div class="content middle">
	
	<div class="menu">
		<div class="three inline h-80">
			this is taking effect
		</div>
		<div class="six inline h-100"  style="vertical-align: middle;">
			while I inputing vertical align here
		</div>
	</div>
</div>

如果我将 vertical-align:middle 放在两个 div 上，您会看到容器都居中对齐，而 content那些 div 不是。

.content{

	width: 100%;
	height: 90%;
}

.middle{

	position: fixed;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.menu{

	width: 70%;
	height: 80%;
}

.three {

	width: 30%;
}


.six{

	width: 60%;
}

.inline {
	display: inline-block;
  border: 1px solid;
}

.h-80{

	height: 80%;
}

.h-100{

	height: 100%;
}

<div class="content middle">
	
	<div class="menu">
		<div class="three inline h-80" style="vertical-align: middle">
			this is taking effect
		</div>
		<div class="six inline h-100"  style="vertical-align: middle;">
			while I inputing vertical align here
		</div>
	</div>
</div>

您还需要将内容的对齐方式设置为居中。唉，这不能用相同的技术来完成。为此，我将使用 flexbox 和 display: inline-flex;对齐元素:居中。对于替代方案，请查看以下问题:How do I vertically align text in a div?

.content{

	width: 100%;
	height: 90%;
}

.middle{

	position: fixed;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.menu{

	width: 70%;
	height: 80%;
}

.three {

	width: 30%;
}


.six{

	width: 60%;
}

.inline {
	display: inline-flex;
  align-items: center;
  border: 1px solid;
}
.inline span {
  vertical-align: middle;
}
.h-80{

	height: 80%;
}

.h-100{

	height: 100%;
}

<div class="content middle">
	
	<div class="menu">
		<div class="three inline h-80" style="vertical-align: middle">
			this is taking effect
		</div>
		<div class="six inline h-100"  style="vertical-align: middle;">
			while I inputing vertical align here
		</div>
	</div>
</div>

进一步调整:你可以完全放弃内联 block ，到处使用 flexbox

.middle, .menu, .three, .six {
  display: flex;
  align-items: center;
}

.content {
  width: 100%;
  height: 90%;
}

.middle, .menu, .three, .six {
  display: flex;
  align-items: center;
}

.middle {
  position: fixed;
  justify-content: center;
  flex-direction: column;
}

.menu {
  width: 70%;
  height: 80%;
}

.three {
  width: 30%;
  background-color: gold;
}

.six {
  width: 60%;
  background-color: silver;
}

.h-80 {
  height: 80%;
}

.h-100 {
  height: 100%;
}

<div class="content middle">

  <div class="menu">
    <div class="three h-80" style="vertical-align: middle">
      this is taking effect
    </div>
    <div class="six h-100" style="vertical-align: middle;">
      while I inputing vertical align here
    </div>
  </div>
</div>