CSS設置段落垂直對齊的方法有哪些-創新互聯

在瀏覽網頁時，經常看到一些段落他是垂直對齊的，今天這篇文章就和大家講講如何用CSS設置段落的垂直對齊，有需要的朋友可以參考一下，希望對你有所幫助。

創新互聯建站專注于禹城企業網站建設,響應式網站建設,商城網站制作。禹城網站建設公司,為禹城等地區提供建站服務。全流程按需策劃，專業設計，全程項目跟蹤，創新互聯建站專業和態度為您提供的服務

CSS中通過屬性vertical-align來設置段落的垂直對齊方式。

注意，對于文字本身而言，該屬性對于塊級元素并不起作用，例如<p>和<div>等標記，但是，對于表格而言，這個屬性十分的重要。

<span style="font-size:24px;"><html>
<head>
<title>
垂直對齊
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>

<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="/file/tupian/20230213/12653.jpg" border="0"></td>
<td class="top">垂直對齊方式，top</td>
</tr>
<tr>
<td><img src="/file/tupian/20230213/12653.jpg" border="0"></td>
<td class="bottom">垂直對齊方式，bottom</td>
</tr>
<tr>
<td><img src="/file/tupian/20230213/12653.jpg" border="0"></td>
<td class="middle">垂直對齊方式，middle</td>
</tr>
</body>
</html>
</span>

如上代碼，建立了一個3行2列的表格，其中左側一列均為圖片，起到了將單元格的高度加大的作用，同時也作為對比。

右側的一列為文字，分別采用了頂端對齊、底端對齊和中間對齊的方式，對應的CSS的值分別為top、bottom和middle。

如果，對vertical-align屬性設置了具體的數值，對于文字本身，則可以在垂直方向上發生位移。

<span style="font-size:24px;"><html>
<head>
<title>
垂直對齊
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>

<body>
<p>給對齊屬性設置具體<span class="zs">數值</span>，正數</p>
<p>給對齊屬性設置<span class="fs">具體</span>數值，負數</p>
</body>
</html>
</span>

如上代碼，當屬性值為正數時，文字將向上移動相應的數值，設置為負數時則向下移動。

此外，vertical屬性還有很多其他值，不過主要是適用于圖片。

以上就是CSS設置段落垂直對齊的方法有哪些的詳細內容，更多請關注創新互聯網站制作公司其它相關文章！

文章標題：CSS設置段落垂直對齊的方法有哪些-創新互聯
URL網址：http://www.2m8n56k.cn/article42/jejhc.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、全網營銷推廣、營銷型網站建設、網站改版、搜索引擎優化、響應式網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

CSS設置段落垂直對齊的方法有哪些-創新互聯