CSS居中方式有哪些?

零下一度
發布: 2017-06-24 14:31:27
原創
1625 人瀏覽過

1.text-align:center;

  使用以上方式居中是將父級容器中display:inline;的行內元素或文字進行水平居中。

2.inline-height:(height)值;

#  使用inline-height時經常和height一起使用,使得內容垂直方向上居中,建議在列表內部的li中使用;

3.margin:auto;

#  使用margin來居中時,一般是在元素給出了確切的width值,設定margin :auto; 或margin: 0 auto; 是相同的效果:當前的元素將水平居中;

  使用margin時,也可以設定margin-left和margin-right的值相等,也能實現水平居中;

4.position定位居中

  根據top和left或bottom、right進行設置,可使元素水平、垂直居中;但是父級元素必須設定高度;

5.Flex盒子

  Flex容器的flex-align:center;

       align-items:center;

justify-cotent:center;

  項目屬性的align-self:center;

6.負值margin:

#
 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }
登入後複製

#  以上程式碼可實現元素的水平垂直居中。

以上是CSS居中方式有哪些?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板