6

我已经为我的同事编写了一个内部资源的网络应用程序，基本模板的一部分是一个简单的对话框 - 一个隐藏div的，在body和之间，当按钮（另一个）header出现时出现绝对位置div被点击，根据点击的按钮显示内容，当点击角落的 X 时消失。你知道例行公事。

所以我怀疑我不应该这样做，但是我发现我还不能在基本模板的 CSS 中描述对话框的 CSS，以便我可以确保它在屏幕上的位置总是或多或少相同。相反，随着对话框内容的尺寸每页的变化，这似乎需要我重新定义对话框的margin-left和margin-right在任何给定的页面上。

比如我的对话框的base css是这样的，每次都加载了base html模板：

#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000; /*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
}

请注意缺少边距 - 我还没有找到一个边距值来完成这项工作，而不会导致对话框大小与其中的内容严重不匹配。例如，在内容预计会很大的页面上，我将边距设置为：

#dialogBox {
margin: 5% 10% 0 10%;
}

但是，如果预计内容会更轻，似乎需要在我加载的下一页上再次设置边距，以避开视觉上的恶作剧：

#dialogBox {
margin: 5% 33% 0 33%;
}

这没什么大不了的，但它是重复的。我确信有更好的方法来做到这一点，这样 div 会自然地扩展并保持相等margin-left，并且margin-right在任何给定的页面上它都处于打开状态，同时保持其内容的“Goldilocks”大小 - 不太大，也不太小，总是恰到好处。

我意识到在一些 jQuery 库中存在用于“漂亮”对话框的现有基础架构——它们甚至在屏幕上拖动并做一些技巧——但这只是针对内部的、仅限员工的网络应用程序，所以我只是对此没有任何兴趣。另外，很高兴知道如何自己构建一些东西，对吧？我在这方面有点太新了，无法作弊并窃取一堆 CSS，所以我试图诚实地获取知识。

如果我遗漏了与该问题相关的任何代码，我非常乐意编辑我的帖子。

编辑 - 关于将对话框放置在容器中，我有两个很好的答案div- 我没有完全接受它们的唯一原因只是因为看起来我最终可能需要重新定义每个页面上的尺寸方面，尽管有一些一次性完成的代码。这可能是我的错，因为不同页面上的信息差异太大，我想避免在必要时强迫我的用户滚动页面。设置每页对话框的宽度让我可以做到这一点；我不知道如果把它留给 CSS 会让我这样做。

最终编辑 - 我相信现在接受的答案是我项目的最佳解决方案。

4

4 回答 4

2

我不确定您是否可以在不添加另一个容器的情况下解决此问题。使用包装器，您可以position: absolute;代替它然后在其中居中，而不需要负边距等。

html

<div class="container">
    <div id="dialogBox">content of whatever size here</div>
</div>

css

.container {
    height: 0; /* hide/ make unclickable if necessary */
    left: 0; right: 0; /* full width */
    text-align: center; /* center inline content */
    position: absolute;
}
#dialogBox {
    /* make div stretch to its content and allow centering */
    display: inline-block;
    /* reset the inherited text-align */
    text-align: left;
}

这样你就不需要关心对话框的宽度了。

演示在http://jsfiddle.net/9wcFb/

或者，您也可以margin: auto;在容器是绝对定位的容器时使用。http://jsfiddle.net/9wcFb/1/

旁注：因为这#dialogBox很可能取决于 JavaScript，如果您不喜欢额外的标记，则完全可以使用脚本添加它，尽管我认为这将是过度工程的情况；）

于 2013-07-18T17:41:59.707 回答
1

在对话框上设置宽度是一个选项吗？

如果是，您可以将 left 属性设置为 50% 并将 margin-left 属性设置为 -(width/2)

看这里：

http://jsfiddle.net/tY7ef/

#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000;
/*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
left: 50%;
margin-left: -200px;
width: 400px;
}

您也可以使用百分比：

width: 60%;
margin-left: -30%;

自动边距通常不适用于绝对定位的元素：http ://www.sitepoint.com/css-center-position-absolute-div/

于 2013-07-18T17:13:45.463 回答
0

根据您是否知道元素的宽度，我可以想到两种快速方法来执行此操作

如果你知道宽度

如果您知道 div 的宽度，请设置距屏幕左侧的距离，并在边距中减去宽度的一半。

假设你的屏幕这么宽：

/*
Legend:
Edge of screen: |
Center of element: .
Beginning of div: [
End of div: ]
*/
|                            .                            |
|                            .{center}                    |{size:56 characters}

你有一个这样宽度的 div：

[---I am .a div---]{size:16 characters}

为了使用这种方法使其居中，我们将设置从左侧到屏幕一半的距离（left: 50%;）：

|                            .[---I am .a div---]         |
|                            .                            |

然后减去边距中的额外距离，即 div 总大小的 50%，或者在我们的例子中是 8 个字符。( margin-left:-8 characters;):

|                   [---I am .a div---]                   |
|                            .                            |

我们现在有一个居中的 div。

这将适用于您使用的任何宽度类型（px、%、em...），只要您将 div 移回其宽度的一半左右即可。

#dialogBox{
 width:70%;
 left:50%;
 margin-left:-35%; /*half of 70%*/
}
#dialogBox{
 width:100px;
 left:50%;
 margin-left:-50px; /*half of 100px*/
}
#dialogBox{
 width:202em;
 left:50%;
 margin-left:-101em; /*you get the picture*/
}

小提琴

如果你不知道宽度。

创建一个新的 div，它将充当您的对话框的容器。left:将此容器 div ( position:absolute;)的值设置为对话 div (now )的值并从中50%减去。50%left:position:relative;

我们在一个 div 中有一个 div：

[[---I am .a div---]]{size:still 16 characters}
/*
  It is important to note that the width of the outer div 
  will always be equal to the width of the inner div 
  unless defined otherwise.
*/

如果我们将容器 div ( C) 设置为屏幕左侧 ( ) 的 50%，left: 50%那么我们得到：

                              CD                 DC
|                            .[[---I am .a div---]]       |
|                            .                            |

现在，我们将left对话框的 div ( D) 设置为-50%（减去父元素宽度的 50%，在这种情况下正好是对话框宽度的 50%。）并得到：

                    D         C        D          C 
|                   [---I am .[a div---]          ]       |
|                            .                            |

这有效地使对话框居中而不知道其宽度。

#container{
  position: absolute;
  left:50%;
}
#dialogBox{
  position: relative;
  left:-50%;
}

小提琴

我在示例中将容器 div 设置为红色，以便您了解它是如何工作的。

于 2013-07-18T18:52:41.870 回答
0

您可以尝试使用自动边距，这样 div 应该自动居中

#dialogBox {
   margin: 5% auto 0;
}
于 2013-07-18T17:09:40.110 回答