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

發(fā)布時間：2020-07-10 10:18:11 來源：億速云閱讀：299 作者：Leah 欄目：web開發(fā)

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

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

由于沒有直接指定框架內(nèi)文本垂直位置的屬性，因此我們可以通過以下方法進行設(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)簽作為表格單元格進行處理。在作為表格的單元格進行處理的情況下，為了有效地使用vertical-align屬性，所以使用vertical-align設(shè)置內(nèi)部文字的垂直位置。

display: table-cell通過設(shè)置，因為它不再是塊元素，所以不在div標(biāo)簽的末尾處進行換行，因此使用了換行符<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)文本的垂直位置了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽