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

資訊專欄INFORMATION COLUMN

CSS學習筆記-元素水平垂直居中

NeverSayNever / 3310人閱讀

摘要:前言布局中經常會遇到元素水平居中的需求今天根據以前的學習筆記以及看過的一些技術博客做個元素水平居中的小結。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。

前言

布局中經常會遇到元素水平居中的需求,今天根據以前的學習筆記?以及看過的一些技術博客做個元素水平居中的小結。

正文 圖片的水平垂直居中
//圖片地址為http://static.jsbin.com/images/dave.min.svg
.container{
    height:300px;
    width:300px;
    background:yellow;
    text-align:center;
    vertical-align:middle;
    display:table-cell; 
}
img{
    background-color: #333;
    height:230px;
    width:230px;
}


這種方法是通過設置display為table-cell,然后設置text-align、vertical-align為center來實現圖片位于父容器中的水平垂直居中,但是缺點是父div無法通過設置margin:0 auto來水平居中。

下面來一個使圖片能在父元素中水平垂直居中,父元素也能水平居中的方法。
使用padding或margin填充

.container{
    margin: 80px auto;
    width: 300px;
    height: 300px;
    background-color: yellow;
}
img{
    width: 100px;
    height: 100px;
    padding: 100px; //margin:100px;也可以。
}

該方法是設置好img的長寬,然后和父容器之間長寬的差距用padding來彌補。效果見下圖。

此方法是參考了大搜車前端博客中的一篇CSS布局的博文,作者是覃業博,原文是針對父div嵌套子div來到達水平垂直居中的目的,我這里div包裹的子元素img,和子元素是div的樣式設置有些許不一樣。

文字的水平垂直居中
文字水平居中
.container{
    line-height:300px;
    width:300px;
    line-height:300px;
    background:yellow;
    text-align:center;
    margin:0 auto;
}


文字的水平垂直居中在于line-height+line-height同高,然后text-align:center

利用float和元素設置偏移來水平垂直居中

先上代碼:

呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
.super-element{
    width: 100%;
    height: 400px;
    background-color: #ccc;
}

.layout-helper{
    float: left;
/*     display:inline-block; */    
    position: relative;
    background:pink;
    left: 50%;
    top: 50%;
}

.sub-element{
    position: relative;
    left: -50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color: #333;
    color: #fff;
}

效果圖:


該方法參考大搜車前端博客中的一篇CSS布局的博文,中心思路就是將需要居中的元素sub-element的父元素layout-helper設置top、left偏移50%,然后設置float使layout-helper縮緊寬度, 再設置sub-element的left為-50%,此時sub-element在水平方向就居中了,而在垂直方向上因為sub-element的父元素layout-helper高度是不確定的,所以給sub-element設置top:-50%因計算不出而無效,此時用到了transform:translateY(-50%);將sub-element偏移-50%,就達到了居中的效果。以上使layout-helper縮緊寬度設置display:inline-block同樣可以達到效果。但是如果sub-element內容一多,就會超出父元素,設置super-element為overflow:auto;就會出現以下效果。

針對這個bug,原文作者覃業博也有一個解決方案,利用元素超出父元素的左邊不會產生滾動條的特性,但是我沒怎么悟透把他那個方案應用到上面這個實例當中,感興趣的人請戳大搜車前端博客中的一篇CSS布局的博文,個人覺得把super-element設置overflow:hidden也可以,sub-element再長也就兩邊頂格。

還有一種通過設置添加占位div和設置占位div的margin-bottom:-50%來使元素居中的方案,先上圖:

.super-element{
    width: 400px;
    height: 400px;
    margin:0 auto;
    background-color:pink;
}
.layout-helper{
    width: 100%;
    height: 50%;
    margin-bottom:-50px;
}
.sub-element{
    position: relative;
    left: 50%;
    transform:translateX(-50%);
    width: 100px;
    height:100px;
    background-color:yellow;
}

效果圖:


其思想就是在super-element中設置一個占super-element寬100%和高50%的div塊,我這里命名layout-helper,然后設置它的margin-bottom為sub-element高度的一半,后面接著的sub-element就垂直居中了,然后再設置sub-element的position:relative;left:50%;transform:translateX(-50%);水平也居中了。這里有個注意點,super-element的高度需要確定,這樣才能使layout-helper的heigh:50%有效,還有layout-helper的margin-bottom設置的負高度為sub-element高度的一半。這種水平垂直居中方式兼容性較好。

此外還有一種使用定位和margin-top+margin-left為負子元素長寬來垂直水平居中的方法。上圖:

 
.super-ele{
    position:relative;
    width:300px;
    height:300px;
    margin:100px auto;
    background:pink;
}

.sub-ele{
    position:absolute;
    width:100px;
    height:100px;
    background:yellow;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}


這種方法也是要設置子元素長和寬并且在設置margin-top、margin-left的時候去匹配子元素長寬的一半。

結尾

元素水平居中的技巧還有很多,還有使用Flex的方法,今天先到這里,等我悟透了再慢慢填補文章,以上實例如有錯誤存在,歡迎各位及時指出。

參考:大搜車前端博客中的一篇CSS布局的博文

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

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

相關文章

  • css學習筆記(一)

    摘要:元素的高度文檔流文檔內元素流動的方向叫做文檔流。塊級元素高度一個元素的高寬度是由其內容決定的,不到萬不得已的時候一般不要設置寬高,塊級元素高度是由其內部文檔流高度總和決定的,并不一定是等于,只是決定,例如設置字體是,但是它的元素高度卻不是。 position定位 CSS position屬性用于指定一個元素在文檔中的定位方式。top,right,bottom 和 left 屬性則決定了...

    dadong 評論0 收藏0
  • 前端-CSS3&H5

    摘要:高度模型淺識為的簡寫,簡稱為塊級格式化上下文,為瀏覽器渲染某一區域的機制,中只有和中還增加了和。并非所有的布局都會在開發中使用,但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不...

    xiaolinbang 評論0 收藏0
  • CSS || 元素垂直居中筆記

    摘要:種元素垂直居中根據不同情況,使用的垂直居中方式各異針對塊級元素與行級元素的垂直居中不同。行級元素行內包含特殊元素如果行內包含特殊元素圖片輸入框元素或者粗體使用設置對齊方式即可垂直居中。 CSS種元素垂直居中 根據不同情況,使用的垂直居中方式各異:針對塊級元素與行級元素的垂直居中不同。 1 行級元素 1.1 行內包含特殊元素 如果行內包含特殊元素:圖片、input輸入框、inline-...

    VPointer 評論0 收藏0
  • css - 收藏集 - 掘金

    摘要:絕對底部前端掘金來自國外的設計達人,純,可以實現當正文內容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人,純CSS,可以實現: 當正文內容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現重疊問題。甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

    phpmatt 評論0 收藏0

發表評論

0條評論

NeverSayNever

|高級講師

TA的文章

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