我用margin做的感覺效果是一樣的,這是巧合?還是哪里有問題?
<style>
div{
??? border:1px solid red;
??? margin:20px auto;
}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
<!--下面是任務部分-->
<div class="imgCenter"><img src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg" /></div>
2016-09-09
這個只是湊巧,因為你沒有給div設置寬高,所以div的寬高由其內部子元素來確定(在這里就是圖片的寬高),因此給div設置margin:20px auto;看起來這個效果是應用于圖片的,其實是作用在div上面。
不信,你試試給div加上大于圖片的寬度和高度,這時圖片會在div的左上角對齊。
2016-08-16
我認為,當我們能夠用簡便的方法來是想我們想要的目標的時候,就不用復雜的方式來實現。我們在使用網頁的時候講究的是速度,是設計的講究的是優化。
2016-08-09
用margin:20px auto; 只是讓盒子上下外邊距為20px,左右自動居中! 但是盒子里面的內容是不會跟著居中的
2016-08-06
margin:20px auto; 中的auto有自動居中的效果,可以理解為auto會根據瀏覽器的寬度自動的設置兩邊的外邊距,原理就是:(在當前瀏覽器分辨率下瀏覽器的寬度-外包含層的寬度)/2=外邊距。
其限制條件是:不能在設置了margin:20px auto;再另外設置浮動(float)、絕對定位(absolute、fixed)
而text-align:center;就不會存在這樣的限制條件
僅供參考
2016-08-06
默認的
2016-08-04
padding,border和margin的書寫方式是一樣
2016-08-04
div設置了margin后為居中,里面的內容自然就居中了