html – 垂直居中的popover div

概述我正在尝试制作类似iPad的popover div作为练习,但我无法找到如何垂直居中popover div,具有未指定的内容宽度/高度. http://jsfiddle.net/mbYyR/5/ 我希望三角形指向#popover-wrapper的上/下右/左值定义的位置,但顶部：-50％不起作用. 谢谢你的帮助 ：) 如果您不想使用javascript,则无法垂直居中(如前所述).但是,如果你的目 我正在尝试制作类似iPad的popover div作为练习,但我无法找到如何垂直居中popover div,具有未指定的内容宽度/高度.

http://jsfiddle.net/mbYyR/5/

我希望三角形指向#popover-wrapper的上/下右/左值定义的位置,但顶部：-50％不起作用.

谢谢你的帮助 ：)

解决方法 如果您不想使用JavaScript,则无法垂直居中(如前所述).但是,如果你的目标只是让一个漂亮的d出窗口允许一些灵活的宽度/高度,我推荐以下纯CSS解决方案.每个部分都会有一些解释,说明我做了什么以及为什么要这样做.

选项#1 HTML(我的首选)

<div ID="popover-wrapper">    <div ID="popover-direction-setter">        <div ID="actual-popover-div">            <div ID="content-with-unkNown-height">                Content Content with unkNown dimensions. Tip should point to the blue dot                Content with unkNown dimensions. Tip should point to the blue dot                Content with unkNown dimensions. Tip should point to the blue dot            </div>           </div>     </div></div><div ID="target-blue-dot"></div>

三角形div消失了,因为我将使用：在伪类之后应用它,因为它纯粹是表示性的.

选项#1 CSS(注意#triangle-tip代码替换为#popover-direction-setter：after)

#popover-direction-setter {    position: absolute;    right: 20px; /* grow left */    top:   0px;    background: #EEE; /* for deBUGging */    wIDth: 160px; /*left position of wrapper - 40px for right position of this and triangle tip border size */}#actual-popover-div {    position: absolute;    right: 0px;    top: -.5em;    margin-top: -25px; /* border-radius + half the height of the triangle */    padding: 0.5em;    background: black;    color: white;    border-radius: 15px;    min-height: 50px; /* 2 * border radius + half the height of the triangle */}#popover-direction-setter:after {    content: '';    position: absolute;    wIDth:  0;    height: 0;    top:           50%;    margin-top:   -20px;    border-top:    20px solID transparent;    border-bottom: 20px solID transparent;    border-left:   20px solID black;    right:        -20px;}

不要被设置了宽度的#popover-direction-setter警告.我认为你知道左边的位置(因为你使用它),所以这个宽度可以预先计算并产生一个d出的最大宽度,这样它就不会从浏览器窗口的左侧流出.我认为这将是一件好事.

最小高度设置在#actical-popover-div上,这样如果内容最小,则三角形看起来很好.

#actual-popover-div的顶部位置抵消了填充上的大小调整.该元素的边缘顶部刚刚碰到足以使箭头在上角很好地坐着,并在最小高度生效时居中.

选项#2 HTML(保留三角形div但重新定位)

<div ID="popover-wrapper">    <div ID="popover-direction-setter">        <div ID="actual-popover-div">            <div ID="content-with-unkNown-height">                Content Content with unkNown dimensions. Tip should point to the blue dot                Content with unkNown dimensions. Tip should point to the blue dot                Content with unkNown dimensions. Tip should point to the blue dot            </div>           </div>         <div ID="triangle-tip"></div>    </div></div><div ID="target-blue-dot"></div>

选项#2 CSS仍然保留,因为你最初有三角形div并且在伪类代码之后删除了我的：

我知道这不能完全满足您的挑战要求.同样,我同意其他人的意见,目前没有办法将一个元素放置在一个垂直居中的高度不确定的位置.但是,如果没有别的,其他人可能会发现我的解决方案对他们有利.

总结

以上是内存溢出为你收集整理的html – 垂直居中的popover div全部内容，希望文章能够帮你解决html – 垂直居中的popover div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。