部分css實現垂直置中和靠右的方法

來源:互聯網
上載者:User
一、垂直置中方法:


1)使用padding使多個文本或input在div中置中顯示(對div和文本高度有要求):


   將div的高度設為各子項目中高度最高的一個h1,加入我們需要的div高度為h2,那麼我們就需要填充padding-top和padding-bottom均為(h2-h1)/2,若選取的h1不是最高的元素高度則可能出現部分模組顯示偏下


  (若文字高度未知且容器的高度可伸縮,只要設定padding為某個固定值將容器完全填充即可)


  還有一種多文本固定高度置中的方法就是使用css的display屬性使


類比,這樣就可以使用vertical-align:middle了。將display:table設定在父元素上,display:table-cell設定在子項目上即可(該方法對IE6以下版本無效 )
2)    使用line-height使當行文字置中,此時設定line-height和height等值即可,在此之後再設定overflow:hidden;(清除浮動從而達到隱藏溢出的效果)


二、使子項目靠右(非文本)


可以用float:left,但是該方法在對網頁進行放大或縮小操作時會對同一父元素下兩個不同子項目的相對位置產生影響


所以可以先對父元素設定position:relative,然後對子項目設定position:absolute;left:0px;從而達到靠左

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.