当前位置：文江博客话题详情

当div的高度不固定时，没有Javascript的div垂直居中

发布于 2024-12-28 14:13:11 字数 218 浏览 0 评论 0原文

当 高度不固定时，我想在没有 JavaScript 的情况下将 div 垂直居中。

我这里找到了一个想法。

我想知道这个问题是否还有其他解决方案。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笛声青案梦长安 2025-01-04 14:13:11

这有效：

这是链接：http://jsbin.com/uvodop/2/edit

看看如何它在盒子内垂直对齐。高度也不固定。

希望它能回答您的问题。

<html>
<head>
    <title>HTML Div vertical align using CSS</title>
    <style type="text/css">
        .outerDiv {
            border: solid 1px #000000;
            width: 300px;
            padding: 5px 2px 5px 2px;
        }

        .innerDiv {
            width: 95%;
            margin: 0px auto;
            padding: 40px 0px 40px 5px;
            border: solid 1px #000000;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv">
            This text is placed inside the next HTML div tag.<br />
            CSS style is used to vertical align the nested div and text.
        </div>
    </div>
</body>
</html>

This works:

Here's link: http://jsbin.com/uvodop/2/edit

See how it's vertically aligned within the box. Height as well isn't fixed.

Hope it answers your question.

<html>
<head>
    <title>HTML Div vertical align using CSS</title>
    <style type="text/css">
        .outerDiv {
            border: solid 1px #000000;
            width: 300px;
            padding: 5px 2px 5px 2px;
        }

        .innerDiv {
            width: 95%;
            margin: 0px auto;
            padding: 40px 0px 40px 5px;
            border: solid 1px #000000;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv">
            This text is placed inside the next HTML div tag.<br />
            CSS style is used to vertical align the nested div and text.
        </div>
    </div>
</body>
</html>

回复收藏 0 原文

关于从前 2025-01-04 14:13:11

虽然这是一个旧线程，但我认为这个答案可能会对某人有所帮助。如果IE的版本灵活到至少IE>; 8、然后您可以使用 display:table-cell 并使用默认的 vertical-align 功能。

在下面的代码中，将在中间垂直对齐的 div 未分配任何高度，但为父级分配 100% 高度以填充屏幕。

看看这个

.outer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  display: table;
}
.inner {
  display: table-row;
  border: 1px solid #0f0;
  height: 100%;
}
.center {
  display: table-cell;
  border: 1px solid #00f;
  vertical-align: middle;
  height: 100%;
}
.hover {
  width:100px;
  border: 1px solid #f00;
  margin-left: auto;
  margin-right: auto;
}

<div class="outer">
  <div class="inner">
    <div class="center">
      <div class="hover">
        I am a random text to give the div some height
      </div>
    </div>
  </div>
</div>

Though this is an old thread, I think this answer might help someone. If the version of IE is flexible to at least IE > 8, then you can use display:table-cell and use the default vertical-align feature.

In the code below, the div.hover which is the div that is going to be vertically aligned middle is not assigned any height however the parent(s) are assigned 100% height to fill the screen.

Check this out

.outer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  display: table;
}
.inner {
  display: table-row;
  border: 1px solid #0f0;
  height: 100%;
}
.center {
  display: table-cell;
  border: 1px solid #00f;
  vertical-align: middle;
  height: 100%;
}
.hover {
  width:100px;
  border: 1px solid #f00;
  margin-left: auto;
  margin-right: auto;
}

<div class="outer">
  <div class="inner">
    <div class="center">
      <div class="hover">
        I am a random text to give the div some height
      </div>
    </div>
  </div>
</div>

回复收藏 0 原文

~没有更多了~