|
導讀網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 文本垂直在網(wǎng)頁布局中是經(jīng)常需要用到的，所以本篇文章給大家分享關(guān)于如何使用CSS指定框架內(nèi)文本的垂直位置，內(nèi)容很詳細，有需要的朋友可以參考一下。在上一篇文章中介紹了利用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指定樣式，則可以在相對坐標中指定內(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標簽作為表格單元格進行處理。在作為表格的單元格進行處理的情況下，為了有效地使用vertical-align屬性，所以使用vertical-align設(shè)置內(nèi)部文字的垂直位置。 display: table-cell通過設(shè)置，因為它不再是塊元素，所以不在div標簽的末尾處進行換行，因此使用了換行符<br />標簽。 顯示結(jié)果： 使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
代碼示例：使用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標簽中設(shè)置并以相對坐標指定它。如果文本在上端對齊的話，在內(nèi)部文本的樣式的top屬性中指定0。如果把文本在下端對齊，則在bottom屬性中指定0。在中央的情況下，在top屬性中指定50%。但是因為文字的左上的坐標是50%的位置，所以在框架的中央必須要把文本的行的高度的一半錯開，那個值是margin-top屬性為- 0.5 em。 效果如下： 使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
以上就是如何使用CSS設(shè)置框架內(nèi)文本的垂直位置的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學習測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
