我要放置<DIV>中的一個元素的中間。水平對齊很容易，當然還有垂直對齊可以用JS做，但我敢肯定，有一個與CSS這樣做的更好的方法。有什麼訣竅？對齊HTML元素父中間沒有JavaScript

P.S.我需要這種與HTML5畫布< >元素的應用的，所以我不介意的解決方案只支持帆布瀏覽器和IE瀏覽器中的7,8（使用插件時支持Canvas）的作品。

編輯：在div 的高度（和寬度）是可調整大小的在支持CSS3屬性resize瀏覽器。但是，我不介意太多。

另一編輯：我也不知道div的高度（即使它沒有被調整大小）。

編輯：看到現場演示 here

本例使用JS。 （Loktar - 感謝您的鏈接）。

Thanks();

來源

2011-03-14 string QNA

是你想對齊垂直固定高度的div？ – thirtydot 2011-03-14 17:51:47

您還可以使用display:table，display:table-cell和vertical-align:center像here到中心。它會調整以適應內容，但不幸的是寬度將保持100％的容器。你可以看到它使用here

來源

2011-03-14 19:00:05

對你的想法做一個小改動 - [我做了]（http://jsfiddle.net/globalDeveloper/m5sw2/55/）！它可能不適用於IE7，但這是相當不重要的。 – 2011-03-16 13:02:10

如果元素並不需要包裝，一個快速和骯髒的方法是設置行高度等於DIV高度（假設它是一個靜態的高度）。

來源

2011-03-14 17:52:18

Live Demo

一到垂直對齊方式是將line-height設置爲容器的height。

#parent{ 
    width: 200px; 
    height: 300px; 
    line-height: 300px; 
    text-align:center; 
}

來源

2011-03-14 17:52:35 Loktar

你把它設置爲'高度'，而不是'高度/ 2' – 2011-03-14 17:59:24

哎呀...感謝你的追捕。 – Loktar 2011-03-14 18:02:02

np。 :)好的解決方案btw，將不得不記住這一點。 – 2011-03-14 18:10:38

此作品在Chrome

<html> 
<head> 
    <style> 
     #outer 
     { 
      position: relative; 
      border: 1px solid #000; 
      width: 400px; 
      height: 400px; 
      margin: 20px; 
      padding: 20px;     
      } 
     #inner 
     { 
      position:absolute; 
      top:25%; 
      right:25%; 
      bottom:25%; 
      left:25%; 
      width: 200px; 
      height: 200px; 
      background-color: #ccc;     
     } 
    </style> 
</head> 
<body> 
<div id="outer"> 
    <div id="inner"></div> 
</div> 
</body>

來源

2011-03-14 18:05:16

如果你要對齊的元素有一個固定的大小，給它絕對位置並使其top和left 50％。然後減去一半的高度，其margin-top和一半的寬度margin-left。例如

HTML：

<div id="container"> 
    <div id="alignedcontainer">content</div> 
</div>

CSS：

#container { 
    position: relative; 
} 
#alignedcontainer { 
    position: absolute; 
    width: 500px; 
    height: 400px; 
    top: 50%; 
    left: 50%; 
    margin-top: -200px; 
    margin-left: -250px; 
}

來源

2011-03-14 18:08:38 biscuitstack

對齊HTML元素父中間沒有JavaScript

編輯：看到現場演示 here

回答

相關問題