鬼谷網頁設計

CSS教學-垂直置中

回列表icon

回列表

css垂直置中

在寫網頁時常常會遇到該怎麼讓圖片垂直置中

CSS垂直置中的方法
一般來說,學CSS第一個問題會遇到就是垂直置中
那要怎麼解決這個問題呢?
以下將有詳細解說
1.(line-height)

這是初學者常會使用的方法
不過我並不太推薦使用這方法
因為這方法只能設定單行
一旦有多行,第二行會比第一行間距就會變很大
此段適用於文字

垂直置中

html語法

<div class="ex1">
    垂直置中
    </div>

css語法

.ex1{
    width: 150px;
     height: 150px;
    line-height:  150px;
    max-width:  100%;
    display:  block;
    text-align:  center;
    background-color:  #eb9700;

    }
    
2.利用偽元素(before,after)

前一個介紹的方法,只適用於單行文字
要讓多行文字,或是區塊垂直置中,可以使用偽元素來進行
在偽元素和垂直置中的元素加上
display:inline-blockvertical-align: middle
這樣就會呈現下面的排版,粉紅色是偽元素的區塊

 
 
 

我們可以看到,因為需要垂直置中的主要區塊,高度比偽元素還高
所以變成偽元素對齊主區塊了,所以偽元素的高度必須是100%

 
 
 

html語法

<div class="ex2-demo">
        <div  class="ex-demo-img">
            <img src="圖片路徑">
        </div>
    </div>

css語法

    .ex2-demo{
    width: 150px;
    height: 150px;
    max-width: 100%;
    display: block;
    text-align: center;
    background-color: #eb9700;
    font-size: 0;
    }
    .ex2-demo:before{
    width:0;
    height:100%;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    }
    .ex2-demo:after{
    width:0;
    height:100%;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    }
    
    
3.利用display:table

我們可以寫一個偽table來讓裡面元素垂直置中
簡單來說,就是最外層,加上display:table
然後需要垂直置中的區塊,加上display:table-cell和vertical-align: middle;
這樣元素就會呈現垂直置中

垂直置中的元素

html語法

<div class="ex3-box">
      <div  class="ex3-img">
            <img src="圖片路徑">
      </div>
    </div>

css語法

.ex3-box{
    width: 150px;
    height: 150px;
    max-width:  100%;
    display:  table;
    background-color:  #eb9700;
    }
    .ex3-img{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    }
    
4.利用position

這是利用絕對位置來讓元素垂直置中
要先在最外層加上position:relative
裡面的元素加上position: absolute
再來需要利用到calc這語法
這是可以讓你在CSS裡做運算的語法
如果你直接設定top:50%,left:50%
這樣你會發現,位置並沒有完全垂直置中
所以需要計算一下,如果你的圖片或元素的寬是50,那計算方式如下
width:calc(50% - 25px)
這邊要注意,計算的–旁邊都需要一個空格
在計算高的位子,用一樣的方法 height:calc(50% - 25px)
這方式只適用於已確定大小的元素,如果大小不一樣的話,位置將不會垂直置中

 

html語法

<div class="ex4-box">
      <div  class="ex4-img">
            <img src="圖片路徑">
      </div>
    </div>

css語法

.ex4-box{
    width: 150px;
    height: 150px;
    max-width:  100%;
    display:  block;
    background-color:  #eb9700;
     position:  relative
    }
    .ex4-img{
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    position: absolute;
    }
    

5.使用 Flexbox


這是目前為止,最簡單的垂直置中方式
而他也能讓裡面的圖片自適應外面框架
用的方法很簡單,只要在最外層定義好語法就能使用
display:flex
align-items:center;(垂直置中)
justify-content:center;(水平置中)
這樣就可以做出垂直置中了

 

html語法

<div class="ex5-box">
        <img src="圖片路徑">
    </div>

css語法

.ex5-box{
    width: 150px;
    height: 150px;
    max-width:  100%;
    background-color:  #eb9700;
     display:  flex;
     align-items: center;
     justify-content:  center;
    }

    
6.使用position加上偽元素

這方法比較複雜
他需要用到我們前面教到的偽元素和position結合
這方法的好處是,他裡面的圖片可以自適應外面的框架
如果比例相同,則會滿版呈現
如果比例不同,則會依照width:100%或是height:100%呈現
首先要在最外層用position:relative;
再來是第二層,利用偽元素和position: absolute;來垂直置中
然後在圖片設定100%顯示,和與偽元素垂直置中的語法,如下
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle;

 

html語法

<div class="ex6-box">
      <div  class="ex6-img">
            <img src="圖片路徑">
      </div>
    </div>

css語法

    
    .ex6-box{
    width: 150px;
    height: 150px;
    max-width:  100%;
    background-color:  #eb9700;
     position: relative;
     font-size: 0;
    }
    .ex6-img{
     width:100%; 
     height: 100%;
     position: absolute;
     text-align: center;
    }
    .ex6-img:before{
     content: ' '; 
     display: inline-block;
     height: 100%;
     width: 0;
     vertical-align: middle;
    }
    .ex6-img img{
     max-width: 100%; 
     max-height: 100%;
     width: auto;
     height: auto;
     display: inline-block;
     vertical-align: middle;
    }

    
上一篇 上一篇 下一篇 下一篇