保證金自動不能在簡單的html/css代碼中工作

如此處所示 - http://jsfiddle.net/d4wUu/，我無法獲得帶有單詞「Testing」的紅色邊框，以便沿着包含它的黑匣子的高度居中。它保持與黑盒頂部邊界對齊，在其下面留下一些空間。保證金自動不能在簡單的html/css代碼中工作

margin-top也無法正常工作。任何想法如何我可以得到margin: auto或margin-top（關於包含它的黑匣子）在這裏的紅色邊框上工作？

來源

2013-03-09 Legendre

看起來好像在使用更多的語義標籤時使用div：'header'（'＃heading'），'h1'（'＃heading-title'）和'p'（'＃＃主text'）。 – cimmanon 2013-03-09 14:49:18

有幾種方法可以垂直居中元素。據我所知，margin: auto將不會在元素上垂直工作，除非您使用某種類型的表格/表格單元格樣式。

這些添加到你的CSS是一種方式，以垂直居中：

#heading { 
    position:relative; 
} 
#heading-title { 
    position:absolute; 
    top: 50%; 
    margin-top: -25px; /* this is half the height of the element */ 
}

這裏有一個更新的fiddle表演這個工作。

來源

2013-03-09 14:14:51 ryan

我想我會用表方法。感謝您的輸入！ +1 – Legendre 2013-03-09 14:20:45

顯示：表格單元打破了一切。例如寬度100％不起作用。所以我要用這個來代替。 – Legendre 2013-03-09 14:26:16

增加：而不是使用前50％（在我的網站上奇怪地禁用了margin-top），我只能使用margin-top。謝謝！ – Legendre 2013-03-09 14:31:17

-1

另一種解決方法，

給margin: 7px auto到#heading-title。

這裏7px，因爲父元素的高度是65px，子元素的高度是50px。有高度差異是15px。因此，將15px分爲margin-top和margin-bottom。

該技術只能用於父級和子級元素的高度爲的固定，因爲它在上面的OP描述中。

Working Fiddle

來源

2013-03-09 14:13:35

對不起，這不是。我想要的是垂直居中紅色邊框，而不改變黑框的高度或垂直位置。 – Legendre 2013-03-09 14:17:07

P.S.我沒有-1你。謝謝你的努力。 – Legendre 2013-03-09 14:18:56

@Legendre我不介意有人低估我。這些只是對我的點。無論如何，我更新了我的帖子，這不是一個好的解決方案，但如果元素的高度是固定的，那麼你可以嘗試我的解決方案。 – 2013-03-09 14:38:00

Fiddle

添加這些：

display: table-cell; 
vertical-align: middle;

到#heading。

來源

2013-03-09 14:13:51

我想這是最乾淨的方法。謝謝！ +1並接受。 – Legendre 2013-03-09 14:20:27

更正：我注意到，寬度：100％不再適用於黑匣子。有沒有辦法來解決這個問題？ – Legendre 2013-03-09 14:25:11

你能證明它「不工作」嗎？因爲它看起來像在我的小提琴中奏效。 – cimmanon 2013-03-09 15:03:35

保證金自動不能在簡單的html/css代碼中工作

回答

相關問題