垂直居中在几个未知高度的区域内

时间:2015-04-18 23:45:35

标签: html css centering

我正试图解决这个问题:

Layout

--------------------
Centered Header (Vert+Horizontally) - 15%
--------------------
Centered Image (Vert+Horizontally) - 50%
--------------------
Centered Description (Vert+Horizontally) - 35%
--------------------

每个都是总高度的百分比(15%,50%,35%),这是未知的,因为我需要使用几个不同的按钮高度。

JSFiddle http://jsfiddle.net/x3zq96d5/

我已经尝试了我能在网上找到的所有内容,包括“在未知中心”页面,它似乎最适合我正在尝试的内容。

每个解决方案都有可怕的破碎。我需要做些什么才能让这些元素在未知的高度中居中?

2 个答案:

答案 0 :(得分:2)

您可以使用display: tabledisplay: table-cell CSS规则来执行此操作。请在此处查看更新的小提琴:http://jsfiddle.net/x3zq96d5/5/

要完成这项工作,请在三个具有百分比高度的div中设置display: tablewidth: 100%。然后,您需要在其中添加一个包含display: table-cellvertical-align: middle的子div。使这个div成为唯一一个有效的孩子只执行一个垂直对齐 - 然后你只需要在子div中添加你的内容,它将根据你的意愿垂直对齐。

缺点是你必须以没有语义含义的子div形式添加标记,但我认为这是一个很小的代价,是实现你喜欢的最好的方式。此外,您需要注意您的内容 - 在您使用h4和p标签的小提琴中,并且这些标签具有浏览器设置的默认顶部/底部边距 - 如果此边距大于百分比高度div中的可用空间,它会将内容推出垂直对齐。相当明显但值得注意。

答案 1 :(得分:1)

你想做什么?在你附图中,你说所有的高度都是未知的,但是在jsfiddle中,你已经宣布.btn的高度为190px。

那么,您希望预期的父母有多大?为了方便自己,您应该声明元素父级的高度为15%,50%和35%。在这种情况下,.btn可以是百分比或固定值。百分比,

height:100%

请注意,如果将.btn的高度设置为100%,它将从其父级继承其高度 - 即使它通常具有由其子级的高度定义的高度。当您将其高度声明为百分比时,它会查看它的父级并成为其百分比。 (即,一个高度为50%的div将是其父级的一半,其他一切保持不变)。

如果您希望高度为浏览器窗口的100%,则可以执行

html, body, ul, .tall, .btn {
    height:100%;
}

要使高度与浏览器一样高,您需要将高度声明为100%,一直到html。或者你可以设置固定高度.btn,这很容易

.btn {height:1000px}

现在,设置子元素的高度,

btn-modal-header {
  height:15%;
}

.btn-modal-glyph {
  height: 50%;
}

.btn-modal-description {
  height: 35%;
}

这将使它们成为父母身高的给定百分比。

至于垂直居中,您需要使用

声明父级
display:table

及其子女

display:table-cell

它不一定是直接的孩子,但这种方式更容易。所以你可以这样做:

.btn > * {
    display:table;
    width:100%;
}

.btn > * > * {
    display:table-cell;
    vertical-align:middle;
}

15%, 50%, and 35%高度的孩子设置为display:table,将他们的孩子显示为table-cell s。然后,您只需将其垂直对齐设置为middle

Jsfiddle:http://jsfiddle.net/x3zq96d5/6/

请注意,如果您垂直调整浏览器的大小,现在将从窗口大小继承高度,一直到子项。