大家好几天前,我在将输入元素居中时有一个小困难 ,有人提出了以下解决方案( FIDDLE HERE )
CSS非常简单明了,是标准CSS,请看::
header {
position: relative;
}
header img {
display: block;
max-width: 100%;
}
.location-search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.input-group {
margin-top: -17px;
top: 50%;
position: absolute;
}
现在这完全实现了我想实现的目标,但是同一个人提出了另一种不寻常的解决方案,使用padding,我非常喜欢这种padding解决方案,因为它麻烦少了,但是我无法完全理解或掌握正在发生的事情,这是用padding解决方案::
header {
position: relative;
}
header img {
display: block;
max-width: 100%;
}
.location-search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 30%;
}
.input-group {
margin-top: -17px;
}
注意padding-top:30%
是如何做到的。 我真的很想了解这是如何工作的,有人可以给我基本的想法吗? 我觉得这是一个更干净,更优雅的解决方案。 当我问同一个人该解决方案的工作原理如何时,他说:
就像我说的,顶部填充使用父级的宽度作为基础。 根据长宽比,它必须大于或小于父高的一半。
但是我又不太明白。 有人能简化一下吗?
谢谢。
亚历克斯-Z