標籤：ima base idt 首頁 logs class index ase nbsp
一、代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>文本垂直對齊vertical-align</title> <style type="text/css"> .head{ margin: 0 0 0 100px; } .container{ margin: 0 0 0 100px; } .container div{ width: 600px; height: 300px; margin: 0 0 300px 0; border: 1px solid red; } img{ width: 300px; border: 1px solid red; } .container div span{ border: 1px solid gray; font-size: 30px; display: inline-block; height: 229px; } .container .d1 span{ vertical-align: baseline; } .container .d2 span{ vertical-align: sub; } .container .d3 span{ vertical-align: super; } .container .d4 span{ vertical-align: bottom; } .container .d5 span{ vertical-align: text-bottom; } .container .d6 span{ vertical-align: top; } .container .d7 span{ vertical-align: middle; } </style></head><body> <div class="head"> <h1>文本垂直對齊vertical-align</h1> <h2>首頁<a href="index.html"></a></h2> </div> <div class="container"> <div class = ‘d1‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> <div class = ‘d2‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> <div class = ‘d3‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> <div class = ‘d4‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> <div class = ‘d5‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> <div class = ‘d6‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> <div class = ‘d7‘><img src="imgs/bg.png"><span>Sunlike阿理WangWang</span></div> </div></body></html>
二、效果
結論：
結論：
結論：
結論：
結論：
結論：
結論：
CSS3----vertical-align（文本垂直對齊）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
