課程
/前端開發
/HTML/CSS
/初識HTML(5)+CSS(3)-升級版
在一個div里如何控制內容垂直居中?
2016-01-09
源自:初識HTML(5)+CSS(3)-升級版 12-12
正在回答
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"> <title>填充</title> <style?type="text/css"> #box1{ ????display:table-cell; ????text-align:center; ????vertical-align:middle; ????width:100px; ????height:100px; ????border:1px?solid?red; } </style> </head> <body> <div?id="box1">盒子1</div> </body> </html>
代碼: html <div?id="parent"> <div?id="child">Content?here</div> </div> css #parent?{display:?table;} #child?{ display:?table-cell; vertical-align:?middle; }
?? border: 1px solid #ccc;
????display: table-cell;
????height: 100px;
????vertical-align: middle;
????width: 100px;
?? text-align:center;
樓上這是控制水平居中,垂直居中可以設置子元素高度例如height:80px;然后再設置父元素line-height:80px;
text-align:center;
舉報
HTML(5)+CSS(3)基礎教程8小時帶領大家步步深入學習標簽用法和意義
2 回答內容為什么沒有垂直居中?
2 回答如何設置文字垂直居中
3 回答如何實現div居中
4 回答圖片垂直居中
3 回答塊級元素在整個網頁界面水平垂直居中如何設置?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-02-11
2016-01-13
2016-01-11
?? border: 1px solid #ccc;
????display: table-cell;
????height: 100px;
????vertical-align: middle;
????width: 100px;
?? text-align:center;
2016-01-10
樓上這是控制水平居中,垂直居中可以設置子元素高度例如height:80px;然后再設置父元素line-height:80px;
2016-01-09
text-align:center;