CSS 圖片在DIV中垂直置中的顯示方法

來源:互聯網
上載者:User

vertical-align:middle;的作用

這篇文章重點寫下vertical-align:middle;的作用

1、使用margin屬性進行水平對齊

<!DOCTYPE html><html><head><style>.center{margin:auto;width:70%;background-color:#b0e0e6;}</style></head><body><div class="center"><p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p><p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p></div><p><b>注釋:</b>除非已經聲明了 !DOCTYPE,否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。</p></body></html>
2、 vertical-align:middle;屬性的使用:

先看一下W3C上對vertical-align的定義:vertical-align 屬性設定元素的垂直對齊。該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表儲存格中,這個屬性會設定儲存格框中的儲存格內容的對齊。

必須承認這句話我看了很久才看懂說的是神馬意思,我的理解是它有兩種用法:

第一種用法,先看後面一句“在表儲存格中,這個屬性會設定儲存格框中的儲存格內容的對齊。”這很容易理解,如果給一個表格的td加一個vertical-align:middle的樣式,表格裡面的內容會垂直置中,同樣的如果給一個vertical-align:bottom就會底部對齊,如果給一個vertical-align:top就會頂部對齊。

第二種用法,看前頁一句“該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。”專業的語言我不會說的,可以打個比喻:假設有兩個行內元素a和b,a和b都是img,當a加了一個vertical-align:middle樣式之後,b的底部(基準)就會對齊a的中間位置,如下圖:


如果a和b都加了一個vertical-align:middle樣式,那麼就互相對齊了對方的中間位置,也就是它們在垂直方向上的中線對齊了,如下圖:


如果我想要讓class="img404"的img在class="wall"的div裡面垂直置中,我可以在div裡面加一個span空標籤,把它的高度設為100%,再給它一個vertical-align:middle樣式,同樣地給img一個vertical-align:middle樣式,那麼img就可以在div裡面垂直置中了。如圖:

接下來是我的demo:

使logo垂直置中顯示:

html檔案如下所示:

<!DOCTYPE html><html><head><title>使用者登入</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="Keywords" content="介面設計"><link rel="stylesheet" href="C:\Users\Administrator\Desktop\ui\ui.css"></head><body><!-- 空一點 --><div id="ajax-hook"></div><!-- 整體頁面div --><div class="login_wrap c1"><!-- 兩大部分:1--頭部,2--整體 --><!-- 頭部div --><div class="login_title"><div class="log-hd"><div class="wpl"><div class="log-logo"><span></span><img class="logo-img" src="C:\Users\Administrator\Desktop\ui\log-logo.png" > </div></div></div></div><!-- 整體div --><div class="login_middle">   </div></div><!-- 底部div --><div class="login_footer"></div></body></html>
css樣式如下:

html,body {background-color: #eff3f5;}div {    display: block;}#ajax-hook {position: fixed;top: 0;z-index: 99999;width: 100%;}.login_wrap{background-color: #1F72B4;height:650px;width:1423px;}.login_title{background-color: #53B232;height:120px;width:1423px;}            .cl {zoom: 1;}.login_middle {             position: relative;padding: 25px 0 0 0;z-index: 5;}.login_footer{background-color: #DD4F43;height:120px;width:1423px;}.log-hd {    border:1px solid red;    height: 120px;    position: relative;    background-color: #EFF3F5;}.wpl {    border:1px solid red;    width: 100%;}.log-logo{width:50%;height: 120px;margin:0 auto;border:1px solid red;}.logo-img{border:1px solid red;vertical-align:middle;}span{height:100%;display:inline-block;vertical-align:middle;}
效果圖如下:



這隻是我練習時候的一點點小心得,後續知識繼續補充。


相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.