垂直对齐：中间;不工作？

Question

我正在尝试在所有方框中进行垂直对齐，因此所有标题都在中间垂直对齐。但出于某种原因，唯一有效的是右框吗？

https://jsfiddle.net/vhqg3v81/

#div-layout { 
  display: table; 
  width: 100%;
  height:100%;
} 

.div-layout-row { 
  display: table-row;
} 

.div-layout-cell { 
  display: table-cell; 
  width: 25%;
  height:100%;
} 

.right-spacer {
    margin-right:5px;
}
.bottom-spacer {
    margin-bottom:5px;
}

.box {
    border: 1px solid black;
    background-color: yellow;
    text-align: center;  
    vertical-align: middle;
    padding: 5px;
    height: 100%;
    min-height:50px;
    min-width:50px;
}

<div id="div-layout"> 
  <div class="div-layout-row"> 
    <div class="div-layout-row"> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Left</div></div>
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Middle</div></div> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Right</div></div> 
    </div> 

    <div class="div-layout-row"> 
       <div class="div-layout-cell"><div class="box right-spacer">Botom Left</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Middle</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Right</div></div> 
    </div> 

    <div  class="div-layout-cell box">Right</div>

  </div> 
</div>

Answer 1

vertical-align仅适用于表格单元格（以及与此无关的内联元素）。

您最大的问题是，您的HTML太复杂了。您在另一个表格行（另一个div-layout-row）中有一个表格行（div-layout-row），这没有任何意义。在另一个（box）内有一个表格单元格（div-layout-cell）。

一般来说，你的HTML通常被称为＆＃34; div soup＆＃34;并且类名被严重选择。它们不应该代表元素的布局/设计/外观，而是它们包含的内容。不要使用占位符构建理论网页，而是尝试根据内容构建布局，例如＆＃34;文章＆＃34;，＆＃34;标题＆＃34;，＆＃34;段落＆＃34;，＆ ＃34;列出＆＃34;，＆＃34;图像＆＃34;，＆＃34;导航＆＃34;，＆＃34;菜单＆＃34;，＆＃34;链接＆＃34;等，特别是使用其他元素div：<section>，<article>，<h1>，<h2>，<ul>。

同样远离＆＃34;布局作为表格思维＆＃34;。还有其他方法来布局元素（浮点数，弹性网格等）

编辑：这里有一些示例代码：

＆＃13;

＆＃13;

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
border: 1px solid red;
}

.gallery ul {
  padding: 0;
  margin: 0;
  list-style: none;

  display: flex;
  width: 75%;
  flex-wrap: wrap;
}

.gallery nav {
  width: 25%;
}

.gallery li {
  height: 50px;
  margin-right: 5px;
  width: calc(33.33% - 5px - 2px);
}

.gallery li, .gallery nav {
  display: flex;
  margin-bottom: 5px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
}

＆＃13;

<section class="gallery">
  <ul>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
  </ul>
  <nav>
    <div>Example</div>
  </nav>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

具有vertical-align的元素需要是table-cell或在某些情况下是inline-block。

Answer 3

要在另一个元素的中间垂直对齐元素，可以将margin-top: auto; margin-bottom: auto;添加到元素中。

Answer 4

在.box中添加行高：50px。

#div-layout { 
  display: table; 
  width: 100%;
  height:100%;
} 

.div-layout-row { 
  display: table-row;
} 

.div-layout-cell { 
  display: table-cell; 
  width: 25%;
  height:100%;
} 

.right-spacer {
    margin-right:5px;
}
.bottom-spacer {
    margin-bottom:5px;
}

.box {
    border: 1px solid black;
    background-color: yellow;
    text-align: center;  
    vertical-align: middle;
    padding: 5px;
    height: 100%;
    min-height:50px;
    min-width:50px;
    line-height:50px;
}

<div id="div-layout"> 
  <div class="div-layout-row"> 
    <div class="div-layout-row"> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Left</div></div>
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Middle</div></div> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Right</div></div> 
    </div> 

    <div class="div-layout-row"> 
       <div class="div-layout-cell"><div class="box right-spacer">Botom Left</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Middle</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Right</div></div> 
    </div> 

    <div  class="div-layout-cell box">Right</div>

  </div> 
</div>