CSS 垂直对齐答案

【问题标题】：CSS vertical-alignCSS 垂直对齐
【发布时间】：2015-09-06 16:50:20
【问题描述】：

我现在正在学习 CSS。

作为一种实践，我正在尝试创建一个简单的 html5 模板，其中包含页眉、部分、页脚、旁边、导航标签 - 在那里正确的位置。在每个标签区域中，我将标签名称与不同的背景和字体颜色放在一起。问题是，我无法将标签文本垂直对齐到中间。我尝试创建一个内部元素 - span，并将其设置为：

span {
     height:100px;
     line-height:100px;
     vertical-align:middle; 
}

或者像这样：

span {
    height:100%;
    line-height:100%;
    vertical-align:middle; 
}

但是当浏览器处于特定大小时，它只会将文本精确地设置在元素的垂直中间。每次更改，都会更改文本的位置。

这是完整的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="style.css" rel="stylesheet" />  
        <script>

        </script>

        <style>
            body,html{
            height:100%;
            width:100%;
            }

            header{
                text-align:center;
                color:blue;
                background:violet;
                height:15%;
            }

            aside{
                text-align:center;
                float:left;
                width:20%;
                height:100%;
                display:inline-block;
                color:red;
                background:lime;
            }

            section{
                text-align:center;
                float:left;
                width:60%;
                height:100%;
                display:inline-block;
                color:pink;
                background:tan;
            }

            nav{
                text-align:center;
                float:left;
                width:20%;
                height:100%;
                display:inline-block;
                color:cyan;
                background:orange;
            }

            footer{
                text-align:center;
                color:gold;
                height:15%;
                background:yellow;
            }

            span {
                  height:100%;
                  line-height:100%;
                  vertical-align:middle; 
            }

            #center-page{
                height:70%;
                font-size:150%;
            }
            </style>

        </head>
        <body>
            <header>
                <span>header</span>
            </header>

            <div id="center-page">
                <aside> 
                    <span>aside</span>
                </aside> 
                <section>
                    <span>section</span>
                </section>
                 <nav>
                    <span>nav</span>
                </nav>
            </div>
             <footer>
                    <span>footer</span>
            </footer>
        </body>
</html>

谢谢！

【问题讨论】：

我试过 span { display:block;行高：100%；垂直对齐：中间； } 不起作用。

标签： css html

【解决方案1】：

你可以试试 flexbox：

header, aside, section, nav, footer {
  display: flex;           /* Magic begins                    */
  justify-content: center; /* Center horizontally             */
  align-items: center;     /* Center vertically               */
  min-width: 0;            /* Ignore the width of the content */
}

body, html {
  height: 100%;
  margin: 0;
}
header, aside, section, nav, footer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
header {
  color: blue;
  background: violet;
  height: 15%;
}
#center-page {
  display: flex;
}
aside {
  flex: 2;
  color: red;
  background: lime;
}
section {
  flex: 6;
  color: pink;
  background: tan;
}
nav {
  flex: 2;
  color: cyan;
  background: orange;
}
footer {
  color: gold;
  height: 15%;
  background: yellow;
}
#center-page {
  height: 70%;
  font-size: 150%;
}

<header>header</header>
<div id="center-page">
  <aside>aside</aside>
  <section>section</section>
  <nav>nav</nav>
</div>
<footer>footer</footer>

【讨论】：

【解决方案2】：

这是一个替代解决方案，非常适合作为参考。取自：http://vanseodesign.com/css/vertical-centering/

CSS 表格法

"...vertical-align 应用于表格单元格，这导致我们使用此方法。我们将元素显示为表格和表格单元格，然后使用垂直对齐属性使内容居中。"

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

【讨论】：