垂直居中popover div [英] Vertically centering a popover div

问题描述

我试图做一个像iPad的popover div作为练习，但我不知道如何垂直居中popover div，有一个未指定的内容宽度/高度。

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

我想要三角形指向由＃popover-wrapper的顶部/底部右/左值定义的位置，但 top：-50％

解决方案

如果你不想使用javascript，那么垂直居中是不可能的（如他人之前所述）。然而，如果你的目标是简单地有一个漂亮的弹出窗口允许一些灵活的宽度/高度，我推荐以下纯CSS解决方案。

OPTION＃1 HTML（我的首选）

 < div id =popover-wrapper> 
< div id =popover-direction-setter> 
< div id =actual-popover-div> 
< div id =content-with-unknown-height> 
内容未知尺寸的内容。提示应指向蓝色的小圆点
未知尺寸的内容。提示应指向蓝色的小圆点
未知尺寸的内容。提示应指向蓝色圆点
< / div> 
< / div> 
< / div> 
< / div> 
< div id =target-blue-dot>< / div> 
  

三角形 div 我将使用：之后的伪类来应用它，因为它是纯粹的演示。

OPTION＃1 CSS （注意＃triangle-tip 代码已替换为＃popover-direction-setter：after ）

 ＃popover-direction-setter {
 position：absolute; 
 right：20px; / * grow left * / 
 top：0px; 
 background：#EEE; / *用于调试* / 
 width：160px; / *左边位置的封装 -  40px右边的位置和三角形边框大小* / 
} 
 
＃actual-popover-div {
 position：absolute; 
 right：0px; 
 top：-.5em; 
 margin-top：-25px; / * border-radius +三角形高度的一半* / 
 padding：0.5em; 
 background：black; 
颜色：白色
 border-radius：15px; 
 min-height：50px; / * 2 *边框半径+三角形高度的一半* / 
} 
 
＃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 具有 width 设置。我假设你知道 left 位置（因为你使用它），所以这个 width 可以预先计算， a 最大宽度，弹出窗口将不会从浏览器窗口的左侧流出。我认为这将是一件好事。

min-height 设置为

位置＃actual-popover-div 会抵消 em code> padding 。该元素上的 margin-top 只是碰到足够使得箭头位于上角，并且当 min-height

OPTION＃2 HTML（保持三角形 div 但重新定位）

 < div id =popover-wrapper> 
< div id =popover-direction-setter> 
< div id =actual-popover-div> 
< div id =content-with-unknown-height> 
内容未知尺寸的内容。提示应指向蓝色的小圆点
未知尺寸的内容。提示应指向蓝色的小圆点
未知尺寸的内容。提示应指向蓝色圆点
< / div> 
< / div> 
< div id =triangle-tip>< / div> 
< / div> 
< / div> 
< div id =target-blue-dot>< / div> 
 

OPTION＃2 CSS保持原来的三角形 div 并消除我的：后的

$ c
$ b我知道这不能满足您的挑战要求。再次，我同意其他人的意见，目前没有办法将元素定位在具有未确定高度的垂直中心。但是，如果没有别的，别人可能会发现我的解决方案对他们有好处。

I'm trying to make an iPad-like popover div as an exercise, but I can't find out how to vertically center the popover div, having an unspecified content width/height.

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

I want the triangle to point to the position defined by #popover-wrapper's top/bottom right/left values, but top: -50% does not work.

Thanks for your help :)

解决方案

If you do not want to use javascript, then centering it vertically is not possible (as previously stated by others). However, if your goal is to simply have a nice pop-up that allows some flexible width/height, I recommend the following pure CSS solution. Some explanation follows each section for what I did and why I did it.

OPTION #1 HTML (my preferred)

<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>

The triangle div is gone, because I am going to use an :after pseudo class to apply it since it is purely presentational.

OPTION #1 CSS (note the #triangle-tip code was replaced with #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;
}

Do not be alarmed by the #popover-direction-setter having width set. I presume you know the left position (since you use it), so this width can be pre-calculated and makes a maximum width that the pop up will be so that it does not end up flowing off the left side of the browser window. I would think that would be a good thing.

The min-height is set on #actual-popover-div so that if content is minimal, it looks good with the triangle.

The top position of #actual-popover-div is offsetting your em sizing on the padding. The margin-top on that element is just bumping up enough to make the arrow sit nicely in the upper corner, and be centered when the min-height takes effect.

OPTION #2 HTML (keeps triangle div but repositions it)

<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>

OPTION #2 CSS remains as you originally had the triangle div and eliminates my :after pseudoclass code.

I know this does not meet your challenge requirements fully. Again, I agree with others that there is no way currently to position an element centered vertically with an undetermined height. However, if nothing else, others may find my solution good for them.

这篇关于垂直居中popover div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！