我正试图解决这个问题:
--------------------
Centered Header (Vert+Horizontally) - 15%
--------------------
Centered Image (Vert+Horizontally) - 50%
--------------------
Centered Description (Vert+Horizontally) - 35%
--------------------
每个都是总高度的百分比(15%,50%,35%),这是未知的,因为我需要使用几个不同的按钮高度。
JSFiddle :http://jsfiddle.net/x3zq96d5/
我已经尝试了我能在网上找到的所有内容,包括“在未知中心”页面,它似乎最适合我正在尝试的内容。
每个解决方案都有可怕的破碎。我需要做些什么才能让这些元素在未知的高度中居中?
答案 0 :(得分:2)
您可以使用display: table
和display: table-cell
CSS规则来执行此操作。请在此处查看更新的小提琴:http://jsfiddle.net/x3zq96d5/5/
要完成这项工作,请在三个具有百分比高度的div中设置display: table
和width: 100%
。然后,您需要在其中添加一个包含display: table-cell
和vertical-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/
请注意,如果您垂直调整浏览器的大小,现在将从窗口大小继承高度,一直到子项。