15-1水平居中設置-行內元素 · 初識HTML+CSS

我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。這里我們又得分兩種情況：[行內元素](http://www.imooc.com/code/2049 "忘了的小伙伴，讓我們點擊鏈接復習一下吧!") 還是 [塊狀元素](http://www.imooc.com/code/2048 "忘了的小伙伴，讓我們點擊鏈接復習一下吧!")?，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下行內元素怎么進行水平居中？如果被設置元素為文本、圖片等行內元素時，水平居中是通過給**父元素**設置?`text-align:center`?來實現的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素?)如下代碼： html代碼： ~~~ <body> <div class="txtCenter">我想要在父容器中水平居中顯示。</div> </body> ~~~ css代碼： ~~~ <style> .txtCenter{ text-align:center; } </style> ~~~ ### 任務我來試試：把右側的圖片設置為水平居中顯示。（記得點擊右上角的全屏按鈕查看效果哦！）備注:這一小節沒有正確性驗證，請查看結果窗口，從而判斷輸入代碼是否正確。 ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>定寬塊狀元素水平居中</title> <style> div{ border:1px solid red; margin:20px; } .txtCenter{ text-align:center; } </style> </head> <body> <div class="txtCenter">我想要在父容器中水平居中顯示。</div>  <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div> </body> </html> ```