成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

小結(jié)——居中問題的解決

darkbaby123 / 1992人閱讀

摘要：居中問題居中問題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設置為子元素設置為距上，據(jù)左，然后減去元素自

居中問題：

1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理：
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
2.relative定位margin：0 auto;管用，水平居中需要做如下處理：
position: relative;
display: flex;
flex-direction: column;
margin: 0 auto;
3.absolute定位 加margin 元素已知寬度

父元素設置為：position: relative;
子元素設置為：position: absolute;
距上50%，據(jù)左50%，然后減去元素自身寬度的距離就可以實現(xiàn)


    

    




.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}
4.absolute定位 加transform 元素未知寬度

如果元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換為：transform: translate(-50%,-50%);


    

    




.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
5.flex布局 (存在兼容性問題)

    

    




.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子項目水平居中
    align-items: center;//使子項目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}
6.able-cell布局

因為table-cell相當與表格的td，td為行內(nèi)元素，無法設置寬和高，所以嵌套一層，嵌套一層必須設置display: inline-block;td的背景覆蓋了橘黃色，不推薦使用


    

        

        

    




.box {
    background-color: #FF8C00;//橘黃色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//紅色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}
7.js的事件監(jiān)聽也可以（css可以實現(xiàn)的不推薦使用，出于性能問題考慮）

如果是隨屏幕變化，而居中的，也可以使用js

//1.監(jiān)聽輪播左移動距離
window.addEventListener("resize",changeDivLeft,false)
function changeDivLeft(){               
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var leftRange = (w-1920)/2;//1920是圖片容器寬度
//  console.log(w,leftRange);
    $(".swiper-container").css({"left":leftRange});   
}

//2.可簡化改版為自執(zhí)行函數(shù)
(function(){
    window.onresize = arguments.callee;
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var leftRange = (w-1920)/2;//1920是圖片容器寬度
    $(".swiper-container").css({"left":leftRange});   
})();

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/1371.html

相關文章

  • 垂直水平居中方法小結(jié)

    摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內(nèi)容做個小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現(xiàn)垂直居中，再使用來實現(xiàn)水平居中。 前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內(nèi)容做個小...

    amuqiao 評論0 收藏0

  • 垂直水平居中方法小結(jié)

    摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內(nèi)容做個小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現(xiàn)垂直居中，再使用來實現(xiàn)水平居中。 前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內(nèi)容做個小...

    xcc3641 評論0 收藏0

  • 水平垂直居中小結(jié)

    摘要：相等的上下值三水平垂直居中絕對定位和負外邊距使用絕對定位實現(xiàn)水平垂直居中時，元素的和應該等于對應的和值的一半再取負值。相對定位或絕對定位均可絕對定位和布局能實現(xiàn)居中效果的方法還有很多，這里列出來的方法只是一小部分，日后會慢慢補充。 ??我們在頁面布局中經(jīng)常會遇到需要將內(nèi)容水平/垂直居中的情況，現(xiàn)在我們就來梳理一下實現(xiàn)的方法。 一、水平居中 ??1.行元素設置其父元素的text-alig...

    xuxueli 評論0 收藏0

  • 網(wǎng)頁單位和rem使用小結(jié)

    摘要：像素像素是一個相對單位。相對不同屏幕，其實際像素大小不同。解決方案直接使用實現(xiàn)的終端適配有興趣的小伙伴可以看下的解決方案使用實現(xiàn)手淘頁面的終端適配地址移動端適配單位的坑你知道多少關于移動端布局的一些總結(jié) 網(wǎng)頁尺寸單位 百分比（%） 英寸（in） 厘米（cm） 毫米（mm） 磅數(shù)（pt） 12 點活字（pc） 字母高度一半（ex） 父級字體（em） 像素（px） 根元素字體（rem） ...

    王巖威 評論0 收藏0

  • CSS 行內(nèi)布局實踐小結(jié)

    摘要：相關內(nèi)聯(lián)格式上下文主要影響內(nèi)布局的行盒模型，這是一個顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個內(nèi)聯(lián)元素都會共同生成一個行盒模型。 前言 通常情況下，要使元素排列在一行內(nèi)，通常做法就是使用float，然后再清浮動。 如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，則必須手動調(diào)整，藍色或者綠色塊的位置，比較繁瑣。 ...

    Taste 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<