jquery 将内容区域垂直居中,直到达到一定高度?

e0bqpujr  于 2023-11-17  发布在  jQuery
关注(0)|答案(9)|浏览(116)

如何允许动态(高度变化)内容区域在用户屏幕上垂直居中(无论屏幕大小如何),直到页面顶部只剩下100px的可用空间?
下面是一个图表:x1c 0d1x
我不完全确定这个问题的解决方案是否只使用CSS或JavaScript -所以欢迎所有建议。

j5fpnvbx

j5fpnvbx1#

我的解决方案考虑到你希望你的内容集中在整个页面上,而不仅仅是“在下面的空间”。我使用负边距来实现这一点。
请参见此处的工作示例:
http://jsfiddle.net/WkQzw/5/
超文本标记语言:

<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

字符串
CSS:

#container {
    width: 100%;
    height: 100%;
    padding: 100px 0;
    margin-top: -100px;
}
#table {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}
#content {
    background-color: lightblue;
    width: 50%;
    margin: 0 auto;
}


测试:

  • IE 9 Win7 --> Works
  • Chrome 30 Mac -->作品
  • Safari 7 Mac --> WORKS
  • Firefox 25 Mac --> WORKS

更新:
我使用box-sizing: border-box;,但Firefox需要额外的-moz-box-sizing: border-box;。现在它也可以在Firefox中工作。

8fsztsew

8fsztsew2#

纯CSS,不使用Table

另一种方法是使用CSS Gridsalign-items属性允许您轻松地垂直对齐网格内容,当内容超出单元格时,则返回正常对齐。
一个例子:

function removeParagraph() {
  
  const p = document.querySelector('p')
  
  if (p)
    p.parentNode.removeChild(p)
    
}

function addParagraph () {

  const p = document.createElement('p')
  
  p.textContent = 'Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.'
  
  document.querySelector('#content').appendChild(p)

}
html, body {
    
  height: 100%;
  
  margin: 0;
  padding: 0;
    
}

#wrapper {
  
  height: 100%;
  
  display: grid;
    
  grid-template-rows: 50px 1fr;
    
  align-items: center;
  
}

#space {
  
  height: 50px;
  width: 100%;
  
  border-bottom: 2px dashed red;
  
  color: red;
  
  text-align: center;
  
  line-height: 50px;
  
}

#content {
  
  width: 80%;
  
  background-color: lightblue;
  
  margin: 0 auto;

}

p {
  
  padding: 10px;
  margin: 0;

}
<section id="wrapper">
  <div id="space">
     <button onclick="removeParagraph()">remove paragraph</button>
     <button onclick="addParagraph()">add paragraph</button>
  </div>
  <div id="content">
    <p>Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.
    </p>
  </div>
</section>

在上面的例子中,我使用JavaScript来允许你添加/删除段落,这样你就可以看到增加内容的效果。这仍然是一个纯粹的CSS解决方案。
根据您的受众,对CSS网格的支持非常好。

w3nuxt5m

w3nuxt5m3#

纯CSS,精简HTML

这是基于ToniTornado的答案,但所需的 Package 器要少得多。
See fiddle demo

HTML格式

<div id="container">
      <div id="content">Some content</div>
</div>

字符串

CSS(垂直定位最小值)

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: table;
    padding-top: 100px;
    margin-top: -100px;
}

#container {
    display: table-cell;
    vertical-align: middle;
    padding-top: 100px;
}

可选顶部区域以下垂直居中

As the above fiddle showed,上面的css将#content居中在屏幕空间上。* 如果您更喜欢居中在顶部区域下方的左侧空间 *,则通过删除负顶部边距来调整body,并通过删除其顶部填充来调整#container,**like this fiddle**并且此css显示:

body {
    display: table;
    padding-top: 100px;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

ogsagwnx

ogsagwnx4#

虽然它需要一个额外的.wrapper,但这个布局是可以用display: table;和朋友实现的:

html

<div class="container">
    <div class="top">some space</div>
    <div class="wrapper">
        <div class="content">
            <div style="height: [any height]">centered content</div>
        </div>
    </div>
</div>

字符串

css

.container {
    display: table;
    width: 100%;
    height: 100%;
}
.top {
    height: 100px;
    display: table-row;
}
.wrapper {
    /* this will take up remaining height (or stretch to content) */
    display: table-row;
}
.content {
    /* because this is displayed as a table cell, the vertical align centers
     * its content (instead of how it usually works on inline elements) */
    display: table-cell;
    vertical-align: middle;
}


http://jsfiddle.net/gLECE/3/

更新

上面的内容将在 top 100 px和bottom 之间居中,而不是在 viewport top和bottom 之间居中(用css实现这一点的一种方法是http://jsfiddle.net/gLECE/6/,但ToniTornado的答案是一个可靠的解决方案)
@TCHdvlp的尝试很接近,但缺少一些重要的部分(缺少顶部空间,实际上不太居中)。
TCHdvlp脚本的工作编辑版本:

var height = $(document.body).height();
$(".dca").each(function(){
    if(($(this).height()+100) < height){
        $(this).css({top: '50%', marginTop: - $(this).height() / 2 });
    }
});


http://jsfiddle.net/gLECE/6/
注意:您可能不仅要在页面加载时执行此操作,还要在调整窗口大小时执行此操作。

lc8prwob

lc8prwob5#

一个无表但基于JavaScript的解决方案(只是为了增加多样性)
HTML

<div id="container">
    <div id="topbar">You can't touch me</div>
    <div id="content">Aliquam erat volutpat...</div>
</div>

字符串
CSS

div#topbar {
    border: 2px dashed red;
    height: 50px;
    text-align: center;
}
div#content {
    background: #90c0ff;
    width: 260px;
    margin: 0px auto;
    position: relative;
}


JavaScript

var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) {
    topMargin = 0;
}
content.style.top = topMargin + 'px';


http://jsfiddle.net/SD7SA/

ybzsozfc

ybzsozfc6#

有趣的问题!我没有看到任何css属性可以实现这一点。但是,也许它存在。你可以尝试的是这样使用css和JavaScript。使用css position:relative和js设置top。而DCA.height()+100 <= container.height,将DCA top设置为(container.height - DCA.height)。否则,top为0,因此DCA将附加到容器的top,假设容器从“Content can 't pass this height”行开始。让我在jsfiddle中尝试并编辑我的帖子。
这就是:
http://jsfiddle.net/TCHdevlp/gLECE/

vhmi4jdf

vhmi4jdf7#

没有JS是可能的,但它肯定会很难,而且可能需要使用大量的CSS代码,这与旧版本(<9)的IE不兼容。
这一概念如下:
1.将一个外部div水平放置 *,垂直居中放置 *(如果你的身体高度不固定,这很难)
1.给予他一个最大高度:100%
1.在这个div中创建一个内部div,它垂直于顶部对齐。
如果你想的话,我可以用小提琴给你做这个。

eivgtgni

eivgtgni8#

https://playcode.io/1650918
您可以使用Flex来实现这一点。
使用min-height属性制作间隔符,以保持flex Package 符居中。由于使用了margin:auto,一旦内容太大,flex Package 符将不会通过顶部间隔符,min-height将防止该间隔符收缩。
这将使内容居中在屏幕的中间(而不是顶部空间下方区域的中间)。一旦内容太大而无法容纳在空间之间,它将延伸到较低的空间之外。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.space {
  min-height: 100px;
  background-color: rgba(0, 0, 0, 0.158);
}

.content-container {
  height: 100%;
  display: flex;
}

.content {
  margin: auto;
  background-color: cyan;
  height: 500px;
  width: 500px;
}

个字符

mbjcgjjk

mbjcgjjk9#

使用<!DOCTYPE html>确保您已启用html5声明
然后,使用<center style="width:100%;"></center>标记来集中元素。
上述标签中的任何元素都将是集中的和响应的。

相关问题