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

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)CSS如何設(shè)置框架內(nèi)文本的垂直位置，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比正定網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式正定網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋正定地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

在上一篇文章中介紹了利用CSS的text-align屬性實現(xiàn)了文本的水平對齊，下面我們就來介紹用于指定框架內(nèi)文本垂直位置的內(nèi)容。

由于沒有直接指定框架內(nèi)文本垂直位置的屬性，因此我們可以通過以下方法進(jìn)行設(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

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
     <link rel="stylesheet" href="TextAlignVerticalCell.css" />
     </head>
     <body>
  <div class="TextVerticalTop">
    頂部垂直對齊。  </div>
  <br />
  <div class="TextVerticalBottom">
    底部垂直對齊。  </div>
  <br />
  <div class="TextVerticalCenter">
    居中垂直對齊。  </div>
    </body>
    </html>

TextAlignVerticalCell.css

.TextVerticalTop {
    height:96px;    
    width:280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #009347;    
    display: table-cell;    
    vertical-align: top;
    }
.TextVerticalBottom {
    height: 96px;    
    width: 280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #009347;    
    display: table-cell;    
    vertical-align: bottom;
    }
.TextVerticalCenter {
    height: 96px;    
    width: 280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #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è)置，因為它不再是塊元素，所以不在div標(biāo)簽的末尾處進(jìn)行換行，因此使用了換行符<br />標(biāo)簽。

顯示結(jié)果：

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

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

代碼示例：使用position:relative

TextAlignVertical.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
     <link rel="stylesheet" href="TextAlignVertical.css" />
</head>
<body>
  <div class="Frame">
    <span class="top">頂部垂直對齊。</span></div>
  <br />
  <div class="Frame">
    <span class="bottom">底部垂直對齊。</span></div>
  <br />
  <div class="Frame">
    <span class="center">居中垂直對齊。</span>
  </div>
</body>
</html>

TextAlignVertical.css

.Frame {
    height: 96px;    
    width: 280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #8b5285;    
    position: relative;
}
span.top {
    position: absolute;    
    top: 0;
}
span.bottom {
    position: absolute;    
    bottom: 0;
}
span.center {
    position: absolute;    
    top: 50%;    
    margin-top: -0.5em;
}

說明：

position: relative在外部div標(biāo)簽中設(shè)置并以相對坐標(biāo)指定它。如果文本在上端對齊的話，在內(nèi)部文本的樣式的top屬性中指定0。如果把文本在下端對齊，則在bottom屬性中指定0。在中央的情況下，在top屬性中指定50%。但是因為文字的左上的坐標(biāo)是50%的位置，所以在框架的中央必須要把文本的行的高度的一半錯開，那個值是margin-top屬性為- 0.5 em。

效果如下：

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

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

上述就是小編為大家分享的CSS如何設(shè)置框架內(nèi)文本的垂直位置了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：CSS如何設(shè)置框架內(nèi)文本的垂直位置
當(dāng)前路徑：http://m.rwnh.cn/article20/gspsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站收錄、域名注冊、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣

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

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

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

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