close
梅問題．教學網

♣梅問題‧教學網【Minwt】♣

CSS3教學-利用CSS3中的Flex屬性，讓區塊內元素垂直&水平居中

Posted: 11 Apr 2016 03:00 PM PDT

梅問題－CSS3教學-利用CSS3中的Flex屬性，讓區塊垂直水平居中
　　現在在設計網頁時，已經捨棄用table排版而改用DIV，再搭配CSS的樣式設定後，就可設計靈活的版型，甚至搭CSS3後，還可設計出RWD響應式網頁，雖然說透過div排版很方便，但當div區塊中再包個div、img或一串文字時，要把區塊中的元素水平與垂直居中時，則會發現到在設定上相當的麻煩，不像table來的那麼簡易，但現在只要透過CSS3中的fle屬性後，就可讓div區塊中的元素水平與垂直居中，比起用CSS2來的方便許多，因此有需要垂直居中的朋友，現在也一塊來看看吧!!
#html
<div class="container">
  <div class="content">CSS3區塊垂直居中梅問題</div>
</div>
#css
.container{
    width: 50%;
    height: 500px;
    background: #FF5B27;
    display: flex; /*顯示模式設為flex*/
}

.content{
    width: 250px;
    height: 80px;
    background: #fff;
    margin: auto;/*當在flex下，設為auto時，就會垂直與水平居中*/
    display:flex;
    align-items:center; /*文字水平居中*/
    justify-content:center;/*文字垂直居中*/
}
#預覽
這時除了區塊居中外，就連區塊內的文字也會跟著一起居中。 梅問題－CSS3教學-利用CSS3中的Flex屬性，讓區塊垂直水平居中
#圖片居中
這時當圖片要居中時，只需把文字改成圖片即可。
#html
<div class="container">
  <div class="content"><img src='img.jpg'></div>
</div>
#預覽
梅問題－CSS3教學-利用CSS3中的Flex屬性，讓區塊垂直水平居中
[範例預覽] [範例下載]
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 knoledge 的頭像
    knoledge

    討論

    knoledge 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄