CSS怎么设置框架内文本的垂直位置

这篇文章将为大家详细讲解有关CSS怎么设置框架内文本的垂直位置，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

按需定制设计可以根据自己的需求进行定制，成都网站建设、网站建设构思过程中功能建设理应排到主要部位公司成都网站建设、网站建设的运用实际效果公司网站制作网站建立与制做的实际意义

方法1：将框架样式更改为表格单元格并使用vertical-align属性

如果将框架样式更改为表格单元格，则可以使用vertical-align属性指定垂直位置。

在CSS中编写以下代码并设置垂直位置。

顶部对齐的示例

.TextVerticalTop{

display:table-cell;

vertical-align:top;

}

底部对齐的示例

.TextVerticalBottom{

display:table-cell;

vertical-align:bottom;

}

居中示例

.TextVerticalCenter{

display:table-cell;

vertical-align:middle;

}

方法2：使用position：relative按相对位置指定

如果position:relative指定样式，则可以在相对坐标中指定内部放置位置。

指定要在相对位置（例如“50％”）内显示的文本的位置。

顶部对齐的示例

span.top{

position:absolute;

top:0;

}

底部对齐的示例

span.bottom{

position:absolute;

bottom:0;

}

居中示例

span.center{

position:absolute;

top:50%;

margin-top:-0.5em;

}

代码示例：使用display：table-cell

代码如下：

TextAlignVerticalCell.html

顶部垂直对齐。