大家好几天前,我在将输入元素居中时有一个小困难 ,有人提出了以下解决方案( 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

===============>>#1 票数:2

图像的原始大小为1200 x 700像素。 调整大小以适合窗口宽度。 例如,假设窗口为1000像素宽。 在这种情况下,图像的高度将为700 x 1000/1200或583像素。 在所有情况下,高度与宽度之比将为0.583,或大约60%。

padding:top: 30%规则告诉浏览器添加等于容器宽度30%的top padding。 (填充属性是不寻常的,因为该百分比始终被视为宽度的百分比,即使在padding-top的情况下,它也可能影响垂直位置和尺寸。)

30%是(大约)60%的一半。 瞧!

===============>>#2 票数:1

这只是同一解决方案的两个变体。 绝对定位元素,然后将其下推一定百分比。 第二个清洁器使用%来消除胶印的需要。 原稿推得比需要的还远,然后向后拉一点。

另一种方法是使用transform: translateY(-50%); 尽管在跨浏览器方面有些限制。 有很多方法可以实现CSS中的功能。 一些比其他更“有效”。

http://davidwalsh.name/css-vertical-center

===============>>#3 票数:1

浏览器在计算边距值的百分比时使用父级宽度。 似乎有点混乱。

但我认为这在逻辑上是正确的,因为假定使用了边距将一个元素与另一个元素分开,并且您通常希望这种间距在所有方面都相等。

为了对齐,您可以将元素的top, left, bottom, right属性设置为position: absolute; 此属性使用非position: static; 父母百分比的高度和宽度

在您的情况下,您可以使用top: 50%; 对于.location-search-container并设置负margin-top:-17px; 补偿元素原点到中心。 或者,设置transform: translateY(-50%) 这样,您就无需知道元素的大小(以像素为单位),并且无需支持较旧的浏览器。

这是[FIDLE] [1]的示例,该示例将元素垂直和水平居中。 您可以将transform属性更改为margin,但应将元素的一半宽度和高度设置为像素

  ask by Alexander Solonik translate from so

未解决问题?本站智能推荐: