CSS浮動是用來布局網(wǎng)頁元素的一種技術(shù)。但是,當我們想讓浮動元素居中時,就需要一些技巧。
下面介紹兩種常用的實現(xiàn)方式:
/* 方式一:使用margin */ .container { width: 100%; text-align: center; /* 水平居中 */ } .item { width: 50%; /* 假設(shè)寬度為50% */ float: left; margin: 0 auto; /* 左右居中 */ }
這種方式的原理是:首先通過父元素的text-align屬性把子元素居中,然后利用margin實現(xiàn)左右居中。
/* 方式二:使用display和text-align */ .container { width: 100%; text-align: center; /* 水平居中 */ } .item { width: 50%; /* 假設(shè)寬度為50% */ display: inline-block; text-align: left; /* 向左對齊 */ }
這種方式的原理是:首先通過父元素的text-align屬性把子元素居中,然后利用display:inline-block把元素設(shè)為行內(nèi)塊級元素,并使用text-align屬性向左對齊。
需要注意的是,這兩種方式都要保證浮動元素的寬度固定或已知,否則無法居中。
上一篇css浮動到下一行
下一篇mysql怎么全量同步