居中一个div，不知道其高度

36 浏览
0 Comments

居中一个div，不知道其高度

我有一个div，我知道它的高度。里面有一个div，我不知道它的高度，因为它包含的文本可能会改变。我在Stackoverflow上找到了一些解决方案，但对我来说不起作用，或者我没有正确使用它。有人可以帮我在这种特定情况下将div居中吗？ http://jsfiddle.net/JTTEM/2/

0

3 答案

0 Comments

问题的出现的原因是因为在不知道div的高度的情况下，想要将div居中显示。在给出的示例中，div的高度是未知的，因此需要找到一种方法将其居中显示。

解决方法是使用JavaScript的JQuery库来实现。首先，使用以下代码将JQuery库添加到页面中：

然后，使用以下代码将div居中显示：

(function(){
  ($('#big1 .small').css('margin-top',($('#big1').height() - $('#big1 .small').height())/2));
  ($('#big2 .small').css('margin-top',($('#big2').height() - $('#big2 .small').height())/2));
})();

以上代码会将具有类名为"small"的div元素在其父元素中垂直居中显示。这是通过计算父元素的高度减去子元素的高度，并将结果除以2来实现的。

如果想要将这个解决方案应用到给出的示例中，可以按照以下步骤操作：

1. 打开示例的链接：jsfiddle.net/JTTEM/2

2. 在页面上方找到"HTML"标签，并将其替换为以下代码：


  
Content





  
Content

3. 在页面上方找到"JavaScript"标签，并将其替换为以下代码：

(function(){
  ($('#big1 .small').css('margin-top',($('#big1').height() - $('#big1 .small').height())/2));
  ($('#big2 .small').css('margin-top',($('#big2').height() - $('#big2 .small').height())/2));
})();

4. 运行示例并观察结果，可以看到两个div元素被垂直居中显示。

以上就是解决问题"Center a div without knowing the height"的原因和解决方法的整理。

0
0 Comments

问题的原因是作者不知道如何在不知道div高度的情况下居中显示div。解决方法是嵌套3个div，并使用display属性设置为table和table-cell，再加上垂直对齐属性vertical-align设置为middle。

以下是相关的整理内容：

有人问作者是否尝试过CSS中的垂直居中的步骤。作者回答说他在div的父元素中添加了display: table;属性，在div中添加了display: table-cell; 和vertical-align: middle;属性，但是并没有生效。示例代码见jsfiddle.net/JTTEM/5。

有人提醒作者注意到他们嵌套了3个div。作者表示不知道如何将这个方法应用到自己的情况中，觉得这个方法对他来说太复杂了。

解决方法就是嵌套3个div，并在内部div中添加display: table-cell; 和vertical-align: middle;属性来实现居中显示。

0
0 Comments

在不使用JavaScript的情况下，要使一个div居中，且不知道其高度，可以使用以下的方法：display:table或者在div的伪元素中添加样式vertical-align。

在给出的例子中，可以看到以下代码：

#big1:after,
#big2:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

上述代码中的#big1:after和#big2:after是伪元素，可以用来添加文本或者其他样式。在这个例子中，通过给#big1:after和#big2:after设置相同的高度，可以使它们与small元素在垂直方向上居中对齐。

这种方法的原理是，通过给伪元素设置与big元素相同的高度，使它们与small元素在同一行上，并且可以在垂直方向上对齐。这样，small元素就可以与big元素在垂直方向上居中对齐。

希望以上解释对你有所帮助。

0