国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小結——居中問題的解決

darkbaby123 / 1898人閱讀

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

居中問題：

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%，據左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%;
    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為行內元素，無法設置寬和高，所以嵌套一層，嵌套一層必須設置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的事件監聽也可以（css可以實現的不推薦使用，出于性能問題考慮）

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

//1.監聽輪播左移動距離
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.可簡化改版為自執行函數
(function(){
    window.onresize = arguments.callee;
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var leftRange = (w-1920)/2;//1920是圖片容器寬度
    $(".swiper-container").css({"left":leftRange});   
})();

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1371.html

相關文章

  • 垂直水平居中方法小結

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

    amuqiao 評論0 收藏0

  • 垂直水平居中方法小結

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

    xcc3641 評論0 收藏0

  • 水平垂直居中小結

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

    xuxueli 評論0 收藏0

  • 網頁單位和rem使用小結

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

    王巖威 評論0 收藏0

  • CSS 行內布局實踐小結

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

    Taste 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<