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

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

3回复

使用CSS将元素垂直居中

我正在尝试在div中垂直居中放置内容。 HTML: CSS: 我想将logo-img-div和logo-text的内容居中,但将这两个div保留在标题内容的左侧。 我发现了许多类似的问题,但是没有一种解决方案有效。
1回复

如何使用输入元素设置按钮+垂直居中? [重复]

这个问题已经在这里有了答案: Flexbox:水平和垂直居中 10个答案 如何在div中垂直对齐元素? 28个答案 我有
2回复

垂直居中的元素。 行高与填充

我正在尝试找到垂直居中两个左浮动元素的最佳方法。 center with padding: http center with padding: //jsfiddle.net/fUmMM/14/ center with line-height: http center with lin
3回复

垂直居中的元素具有最小的边距/填充?

我在页面上有一个垂直居中的幻灯片,但是我想以某种方式添加一个“限制”,以便说说它在较小的屏幕上将页面向上滑动的高度。 http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre 如果您调整窗
1回复

填充技巧纵横比元素-垂直居中

我正在尝试将使用padding-bottom的元素垂直居中,以创建所需的宽高比(用于视频)。 我想有上下两个黑色边框,就像电影以比拍摄的电影更高的长宽比显示时一样: http://jsfiddle.net/y4tcufo5/-测试案例 我尝试了top:50%; 转换:trans
4回复

如何使用float:left将输入垂直居中?

的HTML 的CSS 你好, 我有一个div,在p标签和输入中带有文本(文本可能很长)。 我希望输入文字的垂直居中位置,但要float: left和向margin: auto 10px不起作用。
2回复

在div内垂直居中输入

我希望input字段在每个div内垂直居中。 color-1 color-2 color-3 在每个div或input vertical-align: middle使用vertical-align: middle不起作用。 html, body { height: 100%
1回复

垂直居中输入字段

我在页面上有一个文本输入字段,但是,我发现很难尝试在webkit(Chrome + Safari)中垂直居中。 它在FireFox中很好用。 这是代码: 而CSS: 这是影响它的唯一两个。 对于那些希望看到这一点的人,请访问http://shamil.la ,并观察
1回复

垂直居中放置元素

我只是对如何使元素垂直居中感到困惑。 该代码位于: http : //jsfiddle.net/lzyphil/2bq7zqvf/ 实际上,这部分代码是由wordpress插件Webnus Callout生成的,我正在尝试修改css,以希望“ NOS SUCESS STORIES”
3回复

如何垂直居中多个元素?

我看过整个网站(以及互联网的其余部分),实际提到垂直居中两个或两个以上的唯一问题是这个 ,但唯一的答案似乎只是整个代码审查。 在学习CSS的过程中,我仍然不能按照我想要的顺序集中定位事物。 尽管我已经在下面的最小代码示例中进行了管理,但水平居中通常也同样困难。 我知道howtocenter