CSS怎么設(shè)置框架內(nèi)文本的垂直位置

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

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

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

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

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

頂部對齊的示例

.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指定樣式，則可以在相對坐標(biāo)中指定內(nèi)部放置位置。

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

頂部對齊的示例

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

<!DOCTYPEhtml><html><head>

<metacharset="utf-8"/>

<linkrel="stylesheet"href="TextAlignVerticalCell.css"/>

</head>

<body>

<divclass="TextVerticalTop">

頂部垂直對齊。</div>

<br/>

<divclass="TextVerticalBottom">

底部垂直對齊。</div>

<br/>

<divclass="TextVerticalCenter">

居中垂直對齊。</div>

</body>

</html>

TextAlignVerticalCell.css

.TextVerticalTop{

height:96px;

width:280px;

margin-top:24px;

margin-left:32px;

border:1pxsolid#009347;

display:table-cell;

vertical-align:top;

}

.TextVerticalBottom{

height:96px;

width:280px;

margin-top:24px;

margin-left:32px;

border:1pxsolid#009347;

display:table-cell;

vertical-align:bottom;

}

.TextVerticalCenter{

height:96px;

width:280px;

margin-top:24px;

margin-left:32px;

border:1pxsolid#009347;

display:table-cell;

vertical-align:middle;

}

說明：

display:table-cell將div標(biāo)簽作為表格單元格進(jìn)行處理。在作為表格的單元格進(jìn)行處理的情況下，為了有效地使用vertical-align屬性，所以使用vertical-align設(shè)置內(nèi)部文字的垂直位置。

display:table-cell通過設(shè)置，因?yàn)樗辉偈菈K元素，所以不在div標(biāo)簽的末尾處進(jìn)行換行，因此使用了換行符<br/>標(biāo)簽。

CSS怎么設(shè)置框架內(nèi)文本的垂直位置

關(guān)于“CSS怎么設(shè)置框架內(nèi)文本的垂直位置”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：CSS怎么設(shè)置框架內(nèi)文本的垂直位置
標(biāo)題路徑：http://jinyejixie.com/article6/gdpeig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

CSS怎么設(shè)置框架內(nèi)文本的垂直位置