16、HTML与CSS页面布局设计全解析

HTML与CSS页面布局设计全解析

1. 文本垂直居中

在进行页面设计时，常常会有将单行文本在其父元素内垂直居中的需求。要实现这一点，可将文本的行高设置为大于其字体大小。例如，以下样式规则能让 h1 标题的文本垂直居中：

h1 { 
    font-size: 1.4em; 
    line-height: 2em; 
}

不过需要注意，这种方法仅适用于单行文本。若文本换行到第二行，就无法再实现垂直居中了。垂直居中是常见的设计难题，多年来也有其他一些解决办法，你可以在网上搜索相关解决方案。

2. 导航列表链接水平布局

接下来，我们要对导航列表中的链接进行布局。假设需要将导航列表中的链接水平显示，而非垂直显示，这可以借助 CSS 的浮动属性来实现。

2.1 浮动元素的基本原理

默认情况下，页面内容会按照在 HTML 文件中出现的顺序显示，这属于正常的文档流。当你对某个元素应用浮动属性时，它会脱离原来的位置，被放置在其父元素的左边缘或右边缘。而后续未浮动的内容会占据原浮动元素所占据的空间。
要浮动一个元素，可应用如下的浮动属性：

float: position;

其中， position 可以是 none （默认值）、 left （使元素浮动到左边缘）或 right （使元素浮动到