logo
  • 教程列表
  • SO官方文檔
  • 定心
    • 使用 Flexbox
    • 使用 CSS 轉換
    • 使用 margin 0 auto
    • 使用 text-align
    • 使用絕對位置
    • 使用 calc()
    • 使用 3 行程式碼垂直對齊任何內容
    • 使用行高
    • 鬼元素技術(Micha Czernows hack)
    • 以另一個專案為中心
    • 垂直對齊 div 內的影象
    • 垂直和水平居中,無需擔心高度或寬度
    • 以固定尺寸居中
    • 垂直對齊動態高度元素
    • 使用表格佈局進行水平和垂直居中
  1. StackOverflow 文件
  2. CSS 教程
  3. 定心
  4. 使用 3 行程式碼垂直對齊任何內容

使用 3 行程式碼垂直對齊任何內容

Created: November-22, 2018

IE11 +支援

檢視結果

使用這 3 條線垂直對齊幾乎所有東西。只需確保你應用程式碼的 div / image 具有高度的父級。

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>
  • 使用行高
  • 使用 calc()

Copyright © 2018. All right reserved

tastones.com 备案号:鲁ICP备18045372号-1

  • 關於本站
  • 免責聲明