css垂直居中怎么設置?文字上下居中和圖片垂直居中


  css 居中分css垂直居中和css水平居中,水平居中平時比較常用,這里我們主要講css上下居中的問題。垂直居中又分為css文字上下居中和css圖片垂直居中,下面我們就分別來介紹一下。

  css文字上下居中:一、單行內容的居中。只考慮單行是最簡單的,無論是否給容器固定高度,只要給容器設置 line-height 和 height,並使兩值相等,再加上 over-flow: hidden 就可以了。css代碼為{height: 4em;line-height: 4em;overflow: hidden;}

  優點:1. 同時支持塊級和內聯極元素;2. 支持所有瀏覽器
  缺點:1. 只能顯示一行;2. IE中不支持<img>等的居中
  要注意的是:1. 使用相對高度定義你的 height 和 line-height;2. 不想毀了你的布局的話,overflow: hidden 一定要

  二、多行內容居中,且容器高度可變。也很簡單,給出一致的 padding-bottom 和 padding-top 就行

  優點:1. 同時支持塊級和內聯極元素;2. 支持非文本內容;3. 支持所有瀏覽器
  缺點:容器不能固定高度

  css圖片垂直居中,我們只需要在CSS樣式中加入如下CSS代碼:img{ vertical-align:middle;}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM