首頁 > 開發者 > JavaScript
CSS實現的多行文本垂直置中執行個體代碼，
CSS實現的多行文本垂直置中執行個體代碼:
將一行文本在容器中垂直置中是非常簡單的，只需要兩句代碼就好了，例如:
div{ width:100px; height:100px; line-height:100px;}
以上代碼可以實現單行文本在div中垂直置中效果，只要將div的height屬性值和line-height設定為相同就可以了。
但是以上代碼並不能實現多行文本垂直置中下過，下面再看一段代碼執行個體:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>多行文本置中-螞蟻部落</title><style type="text/css">.wrapper { width:200px; height:200px; background:#F60; font-size:0; }.wrapper:before { content:'.'; display:inline-block; vertical-align:middle; height:100%;}.content { display:inline-block; text-align:center; font-size:16px }</style></head><body><div class="wrapper"> <div class="content">螞蟻部落歡迎您，只有奮鬥才會有美好的未來！</div></div></body></html>
以上代碼實現了多行文本垂直置中對齊，這裡就不多介紹了，可以直接套用就可以了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9626
更多內容可以參閱:http://www.softwhy.com/divcss/
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
