這篇文章將為大家詳細(xì)講解有關(guān)CSS怎么設(shè)置框架內(nèi)文本的垂直位置，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

按需定制設(shè)計(jì)可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)構(gòu)思過(guò)程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

方法1：將框架樣式更改為表格單元格并使用vertical-align屬性

如果將框架樣式更改為表格單元格，則可以使用vertical-align屬性指定垂直位置。

在CSS中編寫以下代碼并設(shè)置垂直位置。

頂部對(duì)齊的示例

.TextVerticalTop{

display:table-cell;

vertical-align:top;

}

底部對(duì)齊的示例

.TextVerticalBottom{

display:table-cell;

vertical-align:bottom;

}

居中示例

.TextVerticalCenter{

display:table-cell;

vertical-align:middle;

}

方法2：使用position：relative按相對(duì)位置指定

如果position:relative指定樣式，則可以在相對(duì)坐標(biāo)中指定內(nèi)部放置位置。

指定要在相對(duì)位置（例如“50％”）內(nèi)顯示的文本的位置。

頂部對(duì)齊的示例

span.top{

position:absolute;

top:0;

}

底部對(duì)齊的示例

span.bottom{

position:absolute;

bottom:0;

}

居中示例

span.center{

position:absolute;

top:50%;

margin-top:-0.5em;

}

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

代碼如下：

TextAlignVerticalCell.html

頂部垂直對(duì)齊。